2

ハイチャート、C3、D3 チャートに取り組んでいます。グラフを PDF 形式でエクスポートする必要があります。Highcharts にはチャートをエクスポートする機能がありますが、C3 と D3 にはこの機能がありません。

グラフの SVG を使用して、グラフをエクスポートしようとしました。SVG を使用して 1 つのグラフをエクスポートできましたが、ページで使用可能なすべてのグラフをエクスポートしようとすると、1 つのグラフしかエクスポートされません。

function exportDonutCharts(){
  var svgArr = [],
  top = 0
  var height = $j(window).height()/2 + 50;
  var chartWidth = $j(window).width() / 2;

  $j(".donut").each(function(){
      if($j(this).hasClass("c3"))
      {
        // retrieving svg for all the charts one by one and adding to array

          var svg = $j(this).children()[0].outerHTML.replace('<svg', '<g transform="translate(0,' + top + ')" version="1.1" xmlns="http://www.w3.org/2000/svg');
         svg = svg.replace('</svg>', '</g>');
         top += height + 50;
         svgArr.push(svg);
      }
  });

  var allChartSVG = '<svg height="'+ top +'" width="' + chartWidth + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
  Highcharts.exportDonutCharts(allChartSVG);
}

Highcharts.exportDonutCharts = function(svg, options) {
    var form;

    // merge the options
    options = Highcharts.merge(Highcharts.getOptions().exporting, options);

    // create the form
    form = Highcharts.createElement('form', {
        method: 'post',
        action: "http://export.highcharts.com/"
    }, {
        display: 'none'
    }, document.body);

    // add the values
    Highcharts.each(['filename', 'type', 'width', 'svg'], function(name) {
        Highcharts.createElement('input', {
            type: 'hidden',
            name: name,
            value: {
                filename: options.filename || 'multipleCharts',
                type: options.type,
                width: options.width,
                svg: svg
            }[name]
        }, null, form);
    });
    //console.log(svg); return;
    // submit
    form.submit();

    // clean up
    form.parentNode.removeChild(form);
};
4

2 に答える 2