【highchart】经典问题

摘要

记录遇到的一些问题和解决方案

• 时差
• 数据容量
• 多表联动

1. 时差

问题描述

highcharts 默认是标准 UTC 时间，而国内默认是东八区时间，所以会有8个小时的时差

解决方法

使用highcart绘图之前，设置UTC属性为false，例子如下：

Highcharts.setOptions({

global: {

useUTC: false //关闭UTC

}

});

2. 数据容量

问题描述

当我们数据装填过多时，会出现highchart #12 Highcharts expects point configuration to be numbers or arrays in turbo mode

解决办法

这个错误是因为turboThreshold 阈值，默认为1000，为避免阈值检测，可以设置turboThreshold=0，不检查数据容量。不过从绘图效率 和 数据传输效率来考虑，最好数据量不要超过svg像素密度，一是会出现数据失真 二 是绘图效率降低 三是 传输效率降低。 可以使用highstock 实现大数据量的绘制， 阈值默认为5万+，同时可以拖动 rangeSelector ， 选择X 轴范围。

3. 多图联动

问题描述

我们经常会遇到多个图之间有关联，需要查看相同X 轴数据，2.0- 版本的highstock 4.0-highcharts 官网并没有这个特性， 升级到4.2 + 版本官网有例子。

解决办法

目前4.2.3 + highcharts , 4.0.2+ highstock 有官方例子，关键代码为：chart.tooltip.refresh(points);

完整例子：

1. highcharts 例子 http://www.highcharts.com/demo/synchronized-charts
2. highstock 例子 和官网一样

如果highchart4.0.3 highstock2.0.3 也有办法，方法为触发point的mouseover 事件，在事件中触发每个chart 显示此X轴上的tooltip 达到联动的效果。

具体例子如下：

highchart关键代码为 chart.tooltip.refresh( chart.series[0].data[j] );

highstock关键代码为 chart.tooltip.refresh( [ chart.series[0].data[j] ]);

• stockchart 创建例子

$(function () {

    var chartList = [];

    createHighStock('container');
    createHighStock('container1');

    // 同步提示
    function syncTooltip(container, p) {
        var i=0, j=0, data;
        console.log(container, p);
        for(; i<chartList.length; i++) {
            if(container.id != chartList[i].container.id) {
                data = chartList[i].series[0].data;
                // 自己遍历寻找目标点，并显示tooltip， 高版本提供searchpoint 方法查找目标点
                for(; j<data.length; j++)
                    if (data[j].x === p)
                        chartList[i].tooltip.refresh( [chartList[i].series[0].data[j] ]);
            }
        }
    }
    function createHighStock(id) {
        $.getJSON('http://www.highcharts.com/samples/data/from-sql.php?callback=?',
            function (data) {
                console.log(data);
                $('#' + id).highcharts('StockChart', {
                    navigator : {
                        adaptToUpdatedData: false,
                    },
                    scrollbar: {
                        liveRedraw: false
                    },
                    legend: {
                        enabled: true,
                        align: 'center',
                        verticalAlign: 'bottom',
                        x: 0,
                        y: 0
                    },
                    title: {
                        text: 'AAPL history by the minute from 1998 to 2011'
                    },
                    subtitle: {
                        text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
                    },
                    xAxis : {
                        minRange: 3600 * 1000 // one hour
                    },
                    tooltip: {
                        formatter: function () {
                            var tpl = '<b>' + Highcharts.dateFormat('%Y-%m-%e %H:%M:%S', this.x) + '</b>';
                            tpl += this.y;
                            return tpl;
                        }
                    },
                    yAxis: {
                        floor: 0,
                    },
                    plotOptions:{
                        series:{
                            shadow:false,
                            borderWidth:0,
                            groupPadding:0,
                            //pointPadding:.025,
                            lineWidth:1,
                            color:'#5a9bd4',
                            fillColor:'rgba(90,155,212, .25)',
                            marker:{
                                radius:0,
                                states:{
                                    hover:{
                                        radius:2
                                    }
                                }
                            },
                            point: {
                                events: {
                                    // key point 关键代码
                                    mouseOver: function(){
                                        syncTooltip(this.series.chart.container, this.x);
                                    }
                                }
                            }
                        },
                    },
                    series :[{
                        data : data,
                        name : 'hehe',
                    },
                    {
                        data : data,
                        name : 'haha',
                    },
                    ]
                });

                var chartObj = $('#' + id).highcharts();
                chartList.push(chartObj);
            }
        );
    };
});

• chart 创建例子

    function syncTooltip(container, p) {
        var i=0, j=0, data;
        console.log(container, p);
        for(; i<chartList.length; i++) {
            if(container.id != chartList[i].container.id) {
                data = chartList[i].series[0].data;
                // 自己遍历寻找目标点，并显示tooltip， 高版本提供searchpoint 方法查找目标点
                for(; j<data.length; j++) {
                    if (data[j].x === p){
                        // !!!!!! key point 关键代码
                        chartList[i].tooltip.refresh( chartList[i].series[0].data[j]);
                    }
                }
            }
        }
    }