Highcharts error #12: www.highcharts.com/errors/12 的解決辦法

偉大的程式員都是從套頁面開始的！

1.問題描述

• 當highcharts需要繪制的點超過1000個點的時候會提示以下錯誤：

表揚一下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
(
    [] => Array
        (
            [x] => 
            [y] => 
        )

    [] => Array
        (
            [x] => 
            [y] => 
        )

    [] => Array
        (
            [x] => 
            [y] => 
        )
)
           

在前端接收資料格式是這樣的：

$('#container').highcharts({
            chart: {
                type: 'spline',
                zoomType: 'xy',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: ,
                events: {
                    load: function () {
                        var series = this.series[];
                        $.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: ,
                events: {
                    load: function () {
                     }, );
                    }
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                },
                turboThreshold: //set 0 to disable the cheack
            }
    });
           

• 然而并不管用。

3.采用第二種解決辦法，把傳入的點的資料改為數組或者數列。

• 這裡采用二位數組的辦法，隻需要改後端傳來的資料格式，而不需要更改前端代碼。

Array
(
    [] => Array
        (
            [] => 
            [] => 
        )

    [] => Array
        (
            [] => 
            [] => 
        )

    [] => Array
        (
            [] => 
            [] => 
        )
）
           

跟前述的差別在于，由于沒有鍵值x和y，前端的Javascript

在傳入時

就不必将每一個點都生成一個對象，而是将整個資料作為一個數組對象進行傳遞。但是，在傳入後Highcharts則仍會将每一個點生成原來一樣的資料對象。

這裡是前端console列印：

• 另外還可以将點的數組作為數字隊列傳輸。也就是說作為一維數組對象傳遞。思路是把所有的x值作為一個一維數組，所有的y值作為一個一維數組。這裡不再詳述。