javascript - ハイチャートの 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');