Question

正如您所见，该演示是3合1图表。

我可以通过导航菜单单独下载。但那不是我的预期。

可以将导出下载图像集于一身吗？

代码

<script src="https://code.highcharts.com/modules/exporting.js"></script>
navigation: {
    buttonOptions: {
        align: 'center'
    }
}

演示：http://jsfiddle.net/puff0211/r43w7qne/

Answer 1

我将您的答案中的小提琴与此示例合并：http://jsfiddle.net/highcharts/gd7bB/

最终效果似乎工作正常：http://jsfiddle.net/kkulig/pzfhnpjh/

我做的唯一修改就是从CSS移动每个图表的width定义（由于某种原因，在那里定义时它不起作用）：

.chart {
    min-width: 320px;
    max-width: 800px;
    margin: 0 auto;
    /*height: 220px;*/
}

用于JS中的图表选项：

chart: {
    marginLeft: 40, // Keep all charts left aligned
    spacingTop: 20,
    spacingBottom: 20,
    height: 220 // added
},

Answer 2

您可以使用Html2canvas库捕获您的网页（或其中的一部分）并转换为Canvas，以便将其保存为图片：

html2canvas($("#container"), {
  onrendered: function(canvas) {
    saveAs(canvas.toDataURL(), 'download.png');
  }
});

如果您愿意，可以使用jsPdf将Canvas保存为PDF格式。

html2canvas($("#container"), {
  onrendered: function(canvas) {
    var imgData = canvas.toDataURL('image/png');
    var doc = new jsPDF('p', 'pt', 'a4');
    doc.addImage(imgData, 'PNG', 10, 10);
    doc.save('download.pdf');
  }
});

检查这个小提琴（从你的更新）：http://jsfiddle.net/beaver71/saku390u/

Highcharts：同步图表，它可以导出下载图像一体化吗？

代码

演示：http://jsfiddle.net/puff0211/r43w7qne/

2 个答案: