解决HighChart开发遇到的2个问题

需求很简单,显示一条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)
            }
        }
    });
}
原文地址:https://www.cnblogs.com/yaotome/p/9373343.html