在初始加载页面时,我们设置图表选项并创建图表。我们允许用户操作显示/隐藏哪些系列项目,还可以更改每个系列的类型。我们还有一个“重置图表”操作,可以将图表恢复到其原始加载设置。一旦用户重置图表,对图表所做的任何更改都不会反映在导出的图像上,除非用户更改了他们的系列图表类型。此处有一个示例 jsFiddle来演示此问题。
图表加载后,单击导出类型,您会看到它们匹配。现在从图例中取消选择其中一个系列并再次导出 - 请注意导出和页面仍然匹配。现在从下拉列表中选择“单个系列”并导出 - 它们再次匹配。现在单击重置图表或从下拉列表中选择“多系列”。这会使图表恢复到最初加载时的样子。现在取消选择一个系列并导出 - 它们不再匹配。导出的图像仍然选择了所有系列。现在再次选择“单个系列”并将类型更改为“线”并导出 - 再次显示所有系列,但它们都是线型。
这就是我在“重置图表”点击操作中重置图表的方式:
//reset Main Chart chart to original specs
resetMainChart.live('click', function () {
forceResetChart(chartMainLoc);
});
...
function forceResetChart(chart) {
if (mainGraphMode.is(':visible')) {
if (mainGraphMode.val() == 'multiple') {
//if (mainGraphFormatType.val() != 'null') {
// mainGraphFormatType.val('null');
//}
mainGraphFormatType.val('null');
} else {
mainGraphMode.val('multiple');
mainGraphFormatType.val('null');
}
mainGraphFormatType.hide();
mainGraphFormatDefault.show();
} else {
mainGraphFormatType.val('null');
}
$('#chartMain').highcharts().destroy();
chartMainLoc = new Highcharts.Chart(optionsChartMain, highlightSer);
}
我不知道为什么以这种方式重置图表会破坏导出。我已经阅读了对其他问题的一些回复,指出我们应该获取当前显示图表的 SVG 并将其发送到导出方法。我不知道该怎么做。文档指出 getSVG() 方法获取初始加载图表的 SVG 字符串-而不是活动图表。