Я пытаюсь использовать highcharts для отображения данных, которые я получаю из базы данных. Я вывожу данные в серию следующим образом:
var seriesDemo = {x: data[i]["fld_DateTime"], y:data[i]["fld_ConsumptionValue"] * 1, deviceType: data[i]["fld_DivisionId"]};
series[newSeriesIndex]["data"].push(seriesDemo);
x_axis = { categories: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"] };
var info = {
chart: {
type: 'spline',
renderTo: divInfo,
zoomType: 'x'
},
title: {
text: title,
x: -20
},
subtitle: {
text: "",
x: -20
},
xAxis: x_axis,
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
shared: true,
useHTML: true,
pointFormatter: function() {
return this.series.name + ' : <b>' + this.y + '</b> ' + UNIT_TYPE[this.deviceType] + '<br/>' +
localize("em_consumption_comparison_report_price") + ' : <b>' + (this.y * UNIT_PRICE_ARRAY[this.deviceType]).toFixed(2) + '</b> ' + MONEY_UNIT_ARRAY[this.deviceType] + '<br/><br/>';
},
//xDateFormat: '%Y-%m-%d %H:%M:%S'
},
legend: {
borderWidth: 0
},
series: series
};
var chart = new Highcharts.Chart(info);
В консоли нет никаких ошибок/предупреждений, но график не отображается, что видно на фотографии ниже
Там данные и формат кажутся хорошими. Мой вывод массива данных (который я вижу из консоли, выглядит следующим образом):
0:{x: " 00:00", y: 328.52, deviceType: 0}
1:{x: " 01:00", y: 640.04, deviceType: 0}
2:{x: " 02:00", y: 736.9, deviceType: 0}
3:{x: " 03:00", y: 621.68, deviceType: 0}
4:{x: " 04:00", y: 565.82, deviceType: 0}
5:{x: " 05:00", y: 170.12, deviceType: 0}
....................................
....................................
23:{x: " 23:00", y: 196.12, deviceType: 0}
Кто-нибудь может увидеть проблему здесь?
У ваших свойств данных x
все есть ведущие пробелы, поэтому Highcharts не может связать их со значениями в вашем массиве categories
.
Либо удалите ведущие пробелы, либо сопоставьте свойства x
с соответствующим индексом вашего массива categories
(так что x: "00:00"
будет x: 0
, x: "01:00"
будет x: 1
и так далее).
"01:00" !== " 01:00"
, так что либо исправьте свой начальный пробел, либо используйте позицию индекса.
yAxis
данныеseries
в объектyAxis
. В противном случае все ваши точки лежат на линии y = 0.