【发布时间】:2015-01-10 14:28:22
【问题描述】:
由于能够在同一页面上获得工作示例图表,我怀疑所需图表未显示的原因是由于数据的加载(或未加载)方式。
我的数据是时间序列数据,保存在./json/chartData.json:
[
{
"2015-01-08": "35"
},
{
"2015-01-09": "35"
},
{
"2015-01-10": "35"
}
]
试图显示数据的页面是template.html 并包含以下我强烈怀疑在某处不正确的javascript。
<script type="text/javascript">
$(function () {
var processed_json = new Array();
$.getJSON('json/chartData.json', function(data) {
// Populate series
for (i = 0; i < data.length; i++){
processed_json.push([data[i].key, parseInt(data[i].value)]);
}
// draw chart
$('#container').highcharts({
plotOptions: {
series: {
enableMouseTracking: false,
shadow: false,
animation: false
}
},
chart: {
type: "spline"
},
title: {
text: ""
},
xAxis: {
allowDecimals: false,
title: {
text: "Date"
}
},
yAxis: {
title: {
text: "Number of tickets"
}
},
series: [{
data: processed_json
}]
});
});
});
</script>
template.html 正文中的容器允许页面呈现图表:
<div id="container" style="min-width: 700px; height: 400px; margin: 0 auto"></div>
请注意,一旦呈现页面,我将使用wkhtmltopdf 将页面输出为 pdf 格式。我添加了绘图选项部分,以允许wkhtmltopdf 正确呈现它。
plotOptions: {
series: {
enableMouseTracking: false,
shadow: false,
animation: false
}
}
【问题讨论】:
标签: jquery json highcharts