Highcharts error #12: www.highcharts.com/errors/12 的解决办法

伟大的程序员都是从套页面开始的！

1.问题描述

• 当highcharts需要绘制的点超过1000个点的时候会提示以下错误：

Highcharts error #12: www.highcharts.com/errors/12

表扬一下highcharts的错误描述，直接官方有链接解释噢。
打开页面之后，官方对错误的解释和描述是这样的：

Highcharts Error #12

Highcharts expects point configuration to be numbers or arrays in turbo mode

This error occurs if the series.data option contains object configurations and the number of points exceeds the turboThreshold. It can be fixed by either setting the turboThreshold option to a higher value, or changing your point configurations to numbers or arrays. See turboThreshold.

翻译一下

Highcharts 错误12
Highcharts 期望 点 的设置是数字或者数组，在加速模式中。

这个错误的产生一般是序列的数据选项中包含的对象也就是点的个数超过了turboThreshold（加速临界值）造成的。可以通过两种办法来修复，一是将turboThreshold（加速临界值）设置大一点的数字，或者是把点的数据格式改为数字或者数据。请参照turboThreshold选项。

• 我们在后端传入点的数据格式是这样的

Array
(
    [0] => Array
        (
            [x] => 1444898346000
            [y] => 10.108
        )

    [1] => Array
        (
            [x] => 1444898359000
            [y] => 10.108
        )

    [2] => Array
        (
            [x] => 1444898371000
            [y] => 10.108
        )
)

在前端接收数据格式是这样的：

 $('#container').highcharts({
            chart: {
                type: 'spline',
                zoomType: 'xy',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 120,
                events: {
                    load: function () {
                        var series = this.series[0];
                        $.post(URL+"/ajaxchart/"+result_id+"/0"+"/thrupt",{},function(result){                         
                        series.setData(result, true, true);
                    });
                }
});             

• 上述数据格式，1000个点的数据，Javascript会生成1000个数据对象，再多的话自然可能出问题。下面是console打印出来的Javascript中实际的赋值：
  

2.尝试第一种解决办法，把turboThreshold设置大一点

参考资料：http://www.stepday.com/post/tie/?331

        $('#container').highcharts({
            chart: {
                type: 'spline',
                zoomType: 'xy',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 120,
                events: {
                    load: function () {
                     }, 1000);
                    }
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                },
                turboThreshold:20000 //set 0 to disable the cheack
            }
    });

• 然而并不管用。

3.采用第二种解决办法，把传入的点的数据改为数组或者数列。

• 这里采用二位数组的办法，只需要改后端传来的数据格式，而不需要更改前端代码。

Array
(
    [0] => Array
        (
            [0] => 1444898346000
            [1] => 10.108
        )

    [1] => Array
        (
            [0] => 1444898359000
            [1] => 10.108
        )

    [2] => Array
        (
            [0] => 1444898371000
            [1] => 10.108
        )
）

跟前述的区别在于，由于没有键值x和y，前端的Javascript 在传入时 就不必将每一个点都生成一个对象，而是将整个数据作为一个数组对象进行传递。但是，在传入后Highcharts则仍会将每一个点生成原来一样的数据对象。
这里是前端console打印：

• 另外还可以将点的数组作为数字队列传输。也就是说作为一维数组对象传递。思路是把所有的x值作为一个一维数组，所有的y值作为一个一维数组。这里不再详述。