如何将包含 JSON 的数组插入到 Highcharts 中？

Question

我在php中生成一个数组，其中包含嵌套在chartData下的json：

array:1 [▼
  0 => array:18 [▼
    "id" => 1
    "chart_title" => "A title"
    "chart_type" => "line"
    "chartData" => "[[1470406561000,2116],[1470406561000,2116],[1470406562000,2116]]"
  ]
]

我想要访问这个数组中的 chartData json 并将其插入到一个 HighCharts 系列中。

我尝试使用以下代码：

window['chart' + chartData.id].series[0].addPoint(chartData, true, shift);

以及一个 forEach 循环：

chartData.forEach(function(dataPoint){
                        console.log(dataPoint);
                        window['chart' + chartData.id].series[0].addPoint(dataPoint[0], true);
                         dataPoint.slice(0,30).forEach(function(point){
                             window['chart' + chartData.id].series[0].addPoint(point, true, shift);
                         });
                    });

两者都没有在控制台显示任何错误，且数值未显示在图表上。如果我console.log(dataPoint);，我会得到看起来正确的输出：[[1470406561000,2116],[1470406561000,2116],[1470406562000,2116]]

我该如何将chartData json 插入到highchart系列中？

- kevinabraham

Answer 1

我的问题是JSON数据在视图中没有被jQuery解析，而是直接传递给highcharts系列。通过添加jQuery.parseJSON(chartData);，它能够正确解析并显示在图表上。

- kevinabraham

Answer 2

使用jQuery可以尝试像这样：

    var dataPoint =   [[1470406561000,2116],
                       [1470406561000,2116],
                       [1470406562000,2116]];  

    var chart = $('#chart2').highcharts();
    chart.series[0].setData(dataPoint);

    $('#chart2').highcharts().redraw();

请确保根据您的代码正确更改图表ID，即#chart2。

- vijayP

---

感谢@vijayP，我尝试了这个方法，如果我在jquery中设置dataPoint变量，它可以正常工作，但是如果我尝试使用数组来设置它，例如var dataPoint = chartData;，它会绘制出这样的图表http://oi68.tinypic.com/29djria.jpg。 - kevinabraham

我使用console.log输出了数据，结果是[[1470406561000,2116],[1470406561000,2116],[1470406562000,2116]]。 - kevinabraham

它和另一个是一样的，对吧？控制台有错误吗？从逻辑上讲应该可以工作。 - vijayP

是的，它看起来是一样的，只有当我在控制台记录 var dataPoint = [[1470406561000,2116]]; 时，输出是 [Array[2]] 0:Array[2] 0:1470406561000 1:2116 length:2 __proto__:Array[0]。而当我输出 dataPoint = chartData; 时，输出是 [[1470406561000,2116]]，不确定为什么处理方式不同。 - kevinabraham

添加了 jQuery.parseJSON(chartData);，问题解决了。感谢您的帮助，Vijay。 - kevinabraham