我正在尝试导出动态生成的图表，但我注意到有些东西没有导出。例如，我的图表有 PlotBands，它根据显示的数据是动态的。
在构建图表时，我遵循了所有优秀 HighChart 示例的标准代码布局，在这些示例中，我在文档加载时立即生成了图表。然后在我的代码中，我使用 Ajax 调用来加载数据并修改标题、绘图带、自定义文本等内容。
问题是在初始图表加载后在图表上修改的任何内容都不会导出为图像或 PDF。我的 PlotBands 是在 Ajax 调用期间添加的。它们无法包含在基于 document.load() 的图表对象中.所以它们很容易被 HighCharts 忽略。
在我的图表中，我想显示不同地点在 24 小时内的能源使用情况。用户可以选择不同的日期和不同的站点。 Plot Bands 需要突出运行时间，每个站点都有不同的运行时间，这些时间加载了数据。此外，图表标题显示站点名称，副标题显示平方英尺。
此外，我的代码使用 HighCharts 渲染器在图表底部绘制了一些自定义文本 text()命令。
我的几乎无法运行的导出代码如下所示:
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: "ChartContainer",
type: "line",
title: { text: null },
subtitle: { text: null }
}
}
});
function UpdateChart() {
$.ajax({
url: "/my/url.php",
success: function(json) {
chart.addSeries(json[1]);
chart.addSeries(json[2]);
chart.setTitle(json[0].title, json[0].subtitle);
chart.xAxis[0].addPlotBand({ color: "#FCFFB9", from: json[0].OpenInterval, to: json[0].CloseInterval, label: { text: "Operating Hours", verticalAlign: "bottom", y: -5, style: { fontSize: "8pt", color: "gray" } } });
chart.renderer.text("Custom Text", 50, 100);
}
});
}
不幸的是，如果用户导出图表，标题、绘图带和“自定义文本”将不会出现。
最佳答案
是的 - 它可能和 highcharts 支持您在此处提到的内容 sample code http://jsfiddle.net/vijaykumarkagne/9c2vqq7q/使用谷歌驱动器中托管文件的 json 数据的动态 highchart。
$.getJSON("https://b943d995d961c8938d74bf398f8748e2b34864c6.googledrive.com/host/0B_i_hw1oG1HeaU9nMWxfTnJZd1k/data.json",{format:"json"},function(result){
chart = new Highcharts.Chart({
chart: {
zoomType: 'x',
type: 'line',
renderTo: 'container'
},
title: {
text: ' '
},
subtitle: {
text: 'Click and drag in the plot area to zoom in',
x: -20
},
xAxis: {
type: 'datetime',
title: {
text: ' '
}
},
yAxis: {
title: {
text: ' '
}
},
series:[{
name: 'Tokyo',
data: result
}]
});
}); <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://b943d995d961c8938d74bf398f8748e2b34864c6.googledrive.com/host/0B_i_hw1oG1HeaU9nMWxfTnJZd1k/dataEmp.json"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<body>
<div id="container"></div>
</body>关于ajax - HighCharts - 如何创建导出所有内容的动态图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12943208/