Question

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

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进行转换，然后使用转换后的数据制作图表？

Answer 1

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

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

Answer 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);

使用AJAX / JSON创建高级图表

2 个答案: