Question

我在导出图表列表中添加了一个新按钮

gsub('[\"]', '', data)

当我单击AddIssue按钮时，我想在同一页面的img标签中添加图表的屏幕截图，

Highcharts.getOptions().exporting.buttons.contextButton.menuItems.push({
                text: 'Add Issue ',
                onclick: function () {
                    this.AddIssue();
                }
            });

我的img标签为

Highcharts.Chart.prototype.AddIssue = function () {
 ....
 $('#mock').attr('src', .........);
}

我尝试使用 getSVG 函数，但我希望它是 PNG 或 JPEG 图片而不是SVG。

内部AddIssue函数

<img id="mock" src="../" />

Answer 1

您可以通过HTML canvas将SVG从getSVG方法转换为PNG：

  load: function() {
    var chart = this,
      svg;

    $('#btn').on('click', function() {
      svg = chart.getSVG();

      var canvas = document.createElement('canvas');
      canvas.width = chart.chartWidth;
      canvas.height = chart.chartHeight;

      var ctx = canvas.getContext('2d');
      var img = document.createElement('img');

      img.onload = function() {
        ctx.drawImage(img, 0, 0);
        canvas.toDataURL('image/png');
      };

      img.setAttribute('src', 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg))));
    });
  }

实时演示：http://jsfiddle.net/BlackLabel/3azfr1nL/

其他解决方案可以在这里找到：https://ourcodeworld.com/articles/read/15/3-ways-to-export-highcharts-charts-to-image-with-javascript-client-side-solution-

此处：https://gist.github.com/philfreo/0a4d899de4257e08a000

DotNet HighCharts Png图片

1 个答案: