我正在尝试根据从Web API接收的JSON创建图形。
我让它正常工作,然后决定开始重构。过了一会儿,我突然发现xAxis不再显示日期,而是显示刻度线。我对JavaScript缺乏经验,对highcharts则更没有经验,所以我无法发现自己的错误。
(来源:mortentoudahl.dk)
我所做的更改是制作一个选项对象,并根据在此处找到的说明将其在实例化时传递给highcharts:http://www.highcharts.com/docs/getting-started/how-to-set-options当我将我的代码与该链接中的最后一个代码块进行比较时,除了options对象外,它似乎是相同的。
var pm10 = [];
var pm25 = [];
var options = {
chart: {
zoomType: 'x',
renderTo: 'container'
},
title: {
text: "Compounds in the air at HCAB"
},
subtitle: {
text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : "Pinch the chart to zoom in"
},
xAxix: {
type: 'datetime'
},
yAxis: {
title: {
text: 'µg/m³'
}
},
series: [{
name: 'Particles less than 2.5 µm',
data: pm25,
pointStart: Date.UTC(2016, 5, 8),
pointInterval: 86400 * 1000 // One day
}, {
name: 'Particles less than 10 µm',
data: pm10,
pointStart: Date.UTC(2016, 5, 8),
pointInterval: 86400 * 1000 // One day
}]
};
function ReverseAndSetArrays(data) {
$.each(data.reverse(), function(key, value) {
if ("PM10b" in value) {
pm10.push(value["PM10b"]);
};
if (!("PM10b" in value)) {
pm10.push(null);
};
if ("PM25b" in value) {
pm25.push(value["PM25b"]);
};
if (!("PM25b" in value)) {
pm25.push(null);
};
});
};
var url = "super secret url";
$.getJSON(url, function(data) {
ReverseAndSetArrays(data);
var chart = new Highcharts.Chart(options);
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
选项对象中的以下配置不正确:
xAxix: {
type: 'datetime'
}
应该是:
xAxis: {
type: 'datetime'
}