使用 AJAX/JSON 创建 highcharts 图表答案

【问题标题】：Create highcharts chart using AJAX/JSON使用 AJAX/JSON 创建 highcharts 图表
【发布时间】：2013-04-01 13:48:21
【问题描述】：

我正在构建一个使用 Highcharts 库来显示单线系列图表的网站。我正在使用 AJAX 使用他们的 YQL 从 yahoo Finance 检索历史财务数据。

ajax 调用工作正常，例如我可以在控制台中查看返回的数据

console.log( data.query.results.quote[0].Close ); 返回收盘价值457.84

我现在如何使用这些数据构建单线系列图表？

我在任何地方都找不到关于如何使用 AJAX 数据创建图表的简单说明。

谢谢

编辑：我在 AJAX 中获取数据并且它可以正常工作，但是尝试使图表与 JSON 一起工作是我遇到困难的地方。

这是我的代码目前的样子：http://jsfiddle.net/JbGvx/

这是 HighStocks 网站上的演示代码：http://jsfiddle.net/xDhkz/

我认为问题在于 AJAX 请求的日期格式。日期像这样返回 2013-02-25 但图表需要 JS 时间戳。有没有办法从 AJAX 中提取日期，使用 Date.UTC 进行转换，然后使用转换后的数据制作图表？

【问题讨论】：

标签： ajax json highcharts yql highstock

【解决方案1】：

如果您正在考虑股票数据，请考虑使用 HighStocks 而不是 HighCharts。它可以比 HighCharts 更快地处理许多数据点。

HighStocks 有一个例子，他们在这里异步提取 AJAX 数据（160 万点）：http://www.highcharts.com/stock/demo/lazy-loading

【讨论】：

我将改用 HighStocks :) 我查看了 jsFiddle 示例，我看到的只是 $.getJSON 调用，没有关于 AJAX 的内容。
getJSON() 只不过是一种调用 AJAX 的简写方法，参见：api.jquery.com/jQuery.getJSON

【解决方案2】：

var chartSeriesData = [];

var chartCategory = [];

$.each(response, function() {

  if(this.name!="TOTAL" && this.no!="0")
  {

    var series_name = this.name;
    var series_data = this.no;

    var series = [
      series_name,
      parseFloat(series_data)
    ];
    chartSeriesData.push(series);   

  }                   

});
//initialize options for highchart

var options = {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
  },
  title: {
    text: 'SalesOrder '
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.y}</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      center:['60%','60%'],
      size:150
      ,
      dataLabels: {
        enabled: true,
        color: '#000000',
        distance: 40,
        connectorColor: '#000000',
        format: '<b>{point.name}</b>: {point.y} '
      }
    }
  },
  series: [{
    type: 'pie',
    name: 'Browser share',
    data:chartSeriesData //load array created from json
  }]
}


//options.series[0].setData(datavaluejson);
var chart= $('#container').highcharts(options);

【讨论】：