是否可以以编程方式导出 Highcharts 图表？

Question

我想使用服务器显示的网页上的数据制作一些报告并将其邮寄出去。

有没有办法通过代码导出图表；这样我可以将其附加到邮件中吗？我发现可以使用鼠标将图形保存为图像，但我不知道如何实际通过代码并将图形版本创建为图像。

Answer 1

是的，这是可能的。

正如您所指出的，它需要导出模块，该模块还包含：

<script src="http://code.highcharts.com/modules/exporting.js"></script>

您正在寻找的功能是

chart.exportChart

功能。它允许您：

将图表的 SVG 版本以及一些转换参数提交到服务器。

这可能只是意味着通过单击按钮来保存它，如这个简单的 JFiddle 演示所示。按钮的功能是：

$('#button').click(function() {
    var chart = $('#container').highcharts();
    chart.exportChart();
});

Answer 2

当然可以。 highchartsjs 网站上有大量信息。检查这篇文章和示例和github脚本。这是基础知识。当然你可以使用其他组合。我个人使用 phantomjs 和 asp.net。

Answer 3

虽然有点晚了，但为这个问题提供我自己的解决方案永远不会太晚。正如其他人所说，您需要 highcharts 导出模块以编程方式执行导出。

从这样的基本设置开始，使用标准 div 和画布：

<div id="divChart"></div>  
<canvas id="cvsChartExport"></canvas>    

和一些 Javascript（我也使用 Jquery）来响应某些事件，以编程方式创建一个 PNG 文件，或此类文件的 Base64 表示形式，用于导出：

if ($("#divChart").is(":visible")) {

  let chart = $("#divChart").highcharts();
  if (chart !== null) {  
    
    let chW = $("#divChart").width();
    let chH = $("#divChart").height();

    // Re-dimension the canvas to agree with chart-div width/height...
    let canvas = document.getElementById("cvsChartExport");
    canvas.width = chW;
    canvas.height = chH;

    let svg = chart.getSVG();    // Needs the Highcharts export module.

    let svg64 = utoa(svg);       // See below.
    let b64Hdr = "data:image/svg+xml;base64,";
    let img64Str = b64Hdr + svg64;

    let img = new Image();
    img.src = img64Str;

    canvas.getContext('2d').drawImage(img, 0, 0, chW + 8, chH + 6);
    chImgData = canvas.toDataURL("image/png"); 
    console.log("chartImgData: ", chImgData);

  }

}  

function utoa(data) {  
  // From:  https://base64.guru/developers/javascript/examples/unicode-strings
  // A version of the window.btoa function, to handle Unicode characters... 
  return btoa(unescape(encodeURIComponent(data))); 
}

我通过 Ajax / POST 将 chImgData 发送到 PHP 脚本，并使用 TCPDF 函数在 PDF 文件中显示图像：

  if (!empty($chImgData)) {

    $brdr = array('LTRB' => array('width' => 0.15, 'cap' => 'butt', 'join' => 'miter', 'dash' => 0, 'color' => array(170, 170, 170)));   // 170: #aaa...

    $imgW = 80;    // In mm.
    $imgH = 60;

    // Image data from JS begins:  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgA...",
    // so base64_decode everything after the comma.....
    $img = imagecreatefromstring(base64_decode(substr($chImgData, strpos($chImgData, ',') + 1)));
    $tmpFPath = sys_get_temp_dir() . DIRECTORY_SEPARATOR;
    $tmpFName = $tmpFPath . "tmp" . CreateRandomString(5) . ".png";
    imagepng($img, $tmpFName);

    $pdf->Image($tmpFName, '', '', $imgW, $imgH, 'PNG', '', 'N', true, 600, 'L', false, false, $brdr, true);
    unlink($tmpFName);

对我有用！