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

最新推荐文章于 2023-08-03 14:09:11 发布

heartbeaty

最新推荐文章于 2023-08-03 14:09:11 发布

阅读量2.7k

点赞数

分类专栏： highcharts 文章标签： highcharts

highcharts 专栏收录该内容

3 篇文章

订阅专栏

针对Highcharts在处理大量数据时出现的错误12，本文详细介绍了两种解决方案：调整turboThreshold阈值及改变数据格式为数组，有效提升了图表加载效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.问题描述

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

<code class="hljs vbnet has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">Highcharts <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">error</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#12: www.highcharts.com/errors/12</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

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

<code class="hljs livecodeserver has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">Highcharts Error <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#12</span>

Highcharts expects point configuration <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">to</span> be numbers <span class="hljs-operator" style="box-sizing: border-box;">or</span> arrays <span class="hljs-operator" style="box-sizing: border-box;">in</span> turbo mode

This error occurs <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> <span class="hljs-operator" style="box-sizing: border-box;">the</span> series.data option <span class="hljs-operator" style="box-sizing: border-box;">contains</span> object configurations <span class="hljs-operator" style="box-sizing: border-box;">and</span> <span class="hljs-operator" style="box-sizing: border-box;">the</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">number</span> <span class="hljs-operator" style="box-sizing: border-box;">of</span> points exceeds <span class="hljs-operator" style="box-sizing: border-box;">the</span> turboThreshold. It can be fixed <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">by</span> either setting <span class="hljs-operator" style="box-sizing: border-box;">the</span> turboThreshold option <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">to</span> <span class="hljs-operator" style="box-sizing: border-box;">a</span> higher <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">value</span>, <span class="hljs-operator" style="box-sizing: border-box;">or</span> changing your point configurations <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">to</span> numbers <span class="hljs-operator" style="box-sizing: border-box;">or</span> arrays. See turboThreshold.</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

翻译一下

<code class="hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">Highcharts 错误12
Highcharts 期望 点 的设置是数字或者数组，在加速模式中。

这个错误的产生一般是序列的数据选项中包含的对象也就是点的个数超过了turboThreshold（加速临界值）造成的。可以通过两种办法来修复，一是将turboThreshold（加速临界值）设置大一点的数字，或者是把点的数据格式改为数字或者数据。请参照turboThreshold选项。</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

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

<code class="hljs php has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">Array</span>
(
    [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>] => <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">Array</span>
        (
            [x] => <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1444898346000</span>
            [y] => <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10.108</span>
        )

    [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>] => <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">Array</span>
        (
            [x] => <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1444898359000</span>
            [y] => <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10.108</span>
        )

    [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>] => <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">Array</span>
        (
            [x] => <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1444898371000</span>
            [y] => <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10.108</span>
        )
)
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul>

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

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'#container'</span>).highcharts({
            chart: {
                type: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'spline'</span>,
                zoomType: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'xy'</span>,
                animation: Highcharts.svg, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// don't animate in old IE</span>
                marginRight: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">120</span>,
                events: {
                    load: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
                        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> series = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.series[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>];
                        $.post(URL+<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/ajaxchart/"</span>+result_id+<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/0"</span>+<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/thrupt"</span>,{},<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(result)</span>{</span>                         
                        series.setData(result, <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>);
                    });
                }
});             
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul>

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

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

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

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">
        $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'#container'</span>).highcharts({
            chart: {
                type: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'spline'</span>,
                zoomType: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'xy'</span>,
                animation: Highcharts.svg, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// don't animate in old IE</span>
                marginRight: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">120</span>,
                events: {
                    load: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
                     }, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1000</span>);
                    }
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>
                    },
                    enableMouseTracking: <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">false</span>
                },
                turboThreshold:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20000</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//set 0 to disable the cheack</span>
            }
    });</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li></ul>

然而并不管用。

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

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

<code class="hljs php has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">Array</span>
(
    [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>] => <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">Array</span>
        (
            [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>] => <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1444898346000</span>
            [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>] => <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10.108</span>
        )

    [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>] => <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">Array</span>
        (
            [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>] => <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1444898359000</span>
            [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>] => <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10.108</span>
        )

    [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>] => <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">Array</span>
        (
            [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>] => <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1444898371000</span>
            [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>] => <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10.108</span>
        )
）</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li></ul>

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