【发布时间】:2017-11-27 14:57:40
【问题描述】:
我有一个动态更新的 highcharts 图表。我使用系列上的“AddPoint”函数将值添加到系列中。这是我初始化图表的方式。
var _trendToolChart = null;
var _trendSeries = null;
function createTrendTool() {
_trendToolChart = Highcharts.chart('trendToolContainer', {
chart: {
type: 'spline',
zoomType: 'x',
panning: true,
panKey: 'shift'
},
title: {
text: 'Trending Signals'
},
yAxis: {
title: {
text: 'Values'
}
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: true
}
}
},
responsive: {
rules: [{
condition: {
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
_trendToolChart.showLoading("Loading...");
}
我保留 _trendToolChart 变量作为以后的全局参考。我会定期查询我们的 API 以获取值。返回值是日期时间的 x 值和小数的 y 值。因为我有一个多线系列,所以我有一个与图表本身的每条线相关联的 WebId。我通过这个 GUID 找到系列,然后在系列中添加一个点。
这是我第二次调用它时的函数内部:
var xValue = Date.UTC(apiResponse.DateString); // convert str to date
var yValue = apiResponse.Value; // decimal value
var point = [xValue, yValue];
// add to series & graph
var chartSeries = $.grep(_trendToolChart.series, function (e) { return e.userOptions.WebId == apiResponse.elemId; })[0];
chartSeries.addPoint(point);
_trendToolChart.redraw();
当我将这些值添加到图表中时,highcharts 将 x 值添加为整数计数,not 添加为日期。这是chrome开发者端响应函数内部的检查:
因此,我在 x 值中得到 [0, 22] 而不是一系列 ["11/27/2017",22]。它在我的图表上显示,我的 xaxis 标签有一个“0”或 1 而不是日期。
这是我尝试的,而不是 addPoint([Date,number]);,我已经完成了 addPoint({x:Date, y:number});现在,在 highchart 系列上的点中显示了日期值,但是在我的图表上,我直观地看到,重绘后添加了零点。
我做错了什么?
【问题讨论】:
标签: javascript charts highcharts