如何使用JSON数据来获得highchart动态创建的图表

Question

我想在高图表动态生成的图形使用JSON数据

手动图形绘制这样

$(function() { 
    var i=7.0; 
    $('#container').highcharts({ 
      title: { 
       text: 'Search Relevancy Graph', 
       x: -20 //center 
      }, 
      subtitle: { 
       text: 'Source: WorldClimate.com', 
       x: -20 
      }, 
      var options = { 
        xAxis: { 
         categories: [] 
        }, 
        series: [] 
       }, 
      yAxis: { 
       title: { 
        text: 'Temperature (°C)' 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }] 
      }, 
      tooltip: { 
       valueSuffix: '°C' 
      }, 
      legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'middle', 
       borderWidth: 0 
      }, 
      series: [{ 
       name: 'Tokyo', 
       data: [i, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
      }, { 
       name: 'New York', 
       data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
      }, { 
       name: 'Berlin', 
       data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
      }, { 
       name: 'London', 
       data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
      }] 
     }); 

    }); 

但我想它会动态当我传递我的json数据时，我很小心。 JSON数据是

json is {"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轴日期（例如：2014年9月2日十五时36分25秒）和在y轴上的前3个值：（33.82,33.42,40.83）为三行...

Answer 1

只需将您的格式由Highcharts支持的格式，例如：

var data = { 
    "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] 
}; 

var series = [{ 
    name: 'some name 1', 
    data: [] 
}, { 
    name: 'some name 2', 
    data: [] 
}, { 
    name: 'some name 3', 
    data: [] 
}], 
    categories = []; 


for(var category in data) { 
    var points = data[category]; 
    categories.push(category); 
    for(var i in points) { 
     series[i].data.push(points[i]); 
    } 
} 

var i = 7.0; 
$('#container').highcharts({ 
    title: { 
     text: 'Search Relevancy Graph', 
     x: -20 //center 
    }, 
    subtitle: { 
     text: 'Source: WorldClimate.com', 
     x: -20 
    }, 
    xAxis: { 
     categories: categories 
    }, 
    yAxis: { 
     title: { 
      text: 'Temperature (°C)' 
     }, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#808080' 
     }] 
    }, 
    tooltip: { 
     valueSuffix: '°C' 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'middle', 
     borderWidth: 0 
    }, 
    series: series 
}); 

演示：http://jsfiddle.net/Ywr3L/22/