需求很简单,显示一条24小时的变化曲线
写完代码效果是只有一条直线,连时间轴都没有
第1个错误 Highcharts error #12
当通过要绘制的点超过1000个时就会报这个错,我按分钟计算间隔,一天有1440分钟,超过了1000所以报错。
解决办法是在初始化参数中配置
plotOptions: { series: { turboThreshold: 2000 // 或者更多,必须大于数组长度(1440) } }
设置完成后时间轴算是显示出来了,但是不正常,只显示其中的几个小时。 而且仍然没有数据,显示为一条直线。
后台明明是有数据传来的,怎么会得不到曲线呢?
后来才发现,数据库的字段是字符型的,所以传到前台js中也是字符型,要手动将其转为数值类型。
parseFloat(chartdata[i][col]);
全部代码如下
function drawChart(chartdata, col, cname) { var datasource = []; for (var i = 0; i < 60 * 24; i++) { if (chartdata[i]) { var tempval = parseFloat(chartdata[i][col]); datasource.push(tempval); } else { datasource.push(null); } } var start = +new Date(GetNowFormatDate() + ' 00:00:00'); var now = +new Date(); Highcharts.setOptions({ global: { useUTC: false }, lang: { contextButtonTitle: '导出', printChart: '打印图表', downloadJPEG: '导出为JPG', downloadPDF: '导出为PDF', downloadPNG: '导出为PNG', downloadSVG: '导出为SVG', loading: '加载中...' } }); console.log(datasource); $('#container').highcharts('StockChart', { chart: { events: { load: function () { if (!window.isComparing) { this.setTitle(null, { text: '加载完成共消耗 ' + (new Date() - now) + 'ms' }); } } }, animation: false, zoomType: 'x' }, rangeSelector: { enabled: false }, tooltip: { split: false, shared: true }, credits: { enabled: false }, yAxis: { title: { text: '监测值' } }, title: { text: cname }, series: [{ name: '监测值', data: datasource, pointStart: start, dataLength: length, pointInterval: 1000 * 60, tooltip: { valueDecimals: 1, valueSuffix: '' } }], plotOptions: { series: { turboThreshold: 2000 // 或者更多,必须大于数组长度(1440) } } }); }