如何通过json数据动态获取基本线highchart答案

【问题标题】：how to get basic line highchart dynamically through json data如何通过json数据动态获取基本线highchart
【发布时间】：2014-09-08 07:42:20
【问题描述】：

我的 json 数据是：

{"09/02/2014 15:36:25":[33.82,33.42,40.83],"08/11/2014 16:25:15":[36.6,33.42,40.45],"07/30/2014 08:43:57":[0.0,0.0,0.0],"08/12/2014 22:00:52":[77.99,74.1,80.12],"08/12/2014 21:19:48":[56.91,63.23,52.42],"07/23/2014 13:37:46":[0.0,0.0,0.0],"08/11/2014 17:35:21":[40.9,43.83,38.34]}

我希望将这些数据转换为高图表基本折线图，我希望 x 轴上的日期和 y 轴上的数据。例如：x 轴的日期：09/02/2014 15:36:25 数据用于 y 轴：33.82,33.42,40.83（对于三个不同的行，例如 data1、data2、data3）

对于我使用的手动生成的图表：http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/

如何从上面的json数据中获取动态生成的图

【问题讨论】：

标签： javascript json graph charts highcharts

【解决方案1】：

您首先需要从 JSON 数据中获取值，例如：

Object.keys(data); //this will return dates
data[xAxis[0]]; //this gives the values corresponding to each date (currently first date)

那么您需要使用这些值动态填充图表：

var chart = $("#container").highcharts();
for(var i=0; i<xAxis.length; i++) {
    chart.addSeries({
        name: xAxis[i],
        data: data[xAxis[i]]
    });
}

顺便说一句，您无法在 xAxis 上显示日期，因为每个数据值都有 3 个点，但如果您输入日期，x 轴类别将超过该日期。逻辑表示将像我在示例中所做的那样将每个日期显示为单独的系列。

See the DEMO here

【讨论】：