zoukankan      html  css  js  c++  java
  • 解决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)
                }
            }
        });
    }
  • 相关阅读:
    内核学习<1>
    守护进程(Daemon进程)
    内核模块版本和内核版本不一致的处理方法
    下载,安装 Source Navigator(ubuntu 14.04)
    最新android NDK 下载地址 for Windows
    HTML5初学一 随机的骰子
    系统自带视频
    网络接口log打印
    recyclerView嵌套recycleView
    冒泡循环
  • 原文地址:https://www.cnblogs.com/yaotome/p/9373343.html
Copyright © 2011-2022 走看看