javascript - Highcharts 的 JSON 解析

Question

我看过很多例子。然而，我仍然坚持这一点。如何解析此 JSON 响应以使用我的 Highstock Highchart？

[{"averageprice":"18.7","date":"2000-01-01"},{"averageprice":"41.73","date":"2000-01-02"},{"averageprice":"34.27","date":"2000-01-03"},{"averageprice":"30.06","date":"2000-01-04"}]

这是我到目前为止的图表...

    $.getJSON('http://example.com/dailyaverages.json', function(data) {
    // Create the chart
    window.chart = new Highcharts.StockChart({
        chart : {
            renderTo : 'ppcontent'
        },

        rangeSelector : {
            selected : 0
        },

        title : {
            text : 'Trade Prices'
        },

        xAxis: {
            type: 'datetime'
        },
        series : [{
            data : data
        }]
    });
});

Answer 1

轴和数据期望数组。请试试：

$.getJSON('http://example.com/dailyaverages.json', function(data) {
    // Create the chart
    var dataObj = JSON.parse(data);
    window.chart = new Highcharts.StockChart({
        chart : {
            renderTo : 'ppcontent'
        },

        rangeSelector : {
            selected : 0
        },

        title : {
            text : 'Trade Prices'
        },

        xAxis: {
            type: 'datetime'
        },
        series : [{
            name: "Trade Prices",
            data : function() {
                  var dataArr = [];
                  dataObj.forEach(function(d) {
                    dataArr.push(parseInt(d.averageprice, 10));
                  });
                  return dataArr;
              }() 
        }]
    });
});

Answer 2

这对我有用。必须将日期转换为 UNIX 格式：

function addPriceChart(chartcontainerID, chartTitle, dataURL) {
          $.getJSON(dataURL, function (jsonresult) {

            window.chart = new Highcharts.StockChart({
              chart: {
                renderTo: chartcontainerID
              },

              rangeSelector: {
                selected: 1
              },

              title: {
                text: chartTitle
              },

              credits: {
                enabled: false
              },

              series: [{
                name: 'Price1',
                data: function () {
                  var dataArr = [];
                  jsonresult.forEach(function (row) {
                    var dateParts = row.date.split('-');
                    var date = new Date(dateParts[0], (dateParts[1] - 1), dateParts[2]);
                    var data = [date.getTime(), parseFloat(row.averageprice)];
                    dataArr.push(data);
                  });
                  return dataArr;
                }(),
                tooltip: {
                  valueDecimals: 2
                }
              }]
            });
          });
    } // END addPriceChart Function


    addPriceChart('ppcontent', 'Prices, 'http://mysite.com/data.json');