リモートJSONファイルからハイチャートグラフをプロット

Question

ハイチャートJSを使用してグラフをプロットしようとしています。 Y軸であるべきhttps://api.myjson.com/bins/gdpu7

receive_date X軸とresponsesする必要があります - ：私は、JSONが

[{"receive_date":"2013-11-04","responses":"2"}] 

、同様に、JSONファイルを持っています。私はリモートJSONデータをロードしてHighchartsに渡しています。しかし、X軸にreceive_dateというキーを割り当て、Y軸にresponsesというキーを割り当てることをお勧めします。

JSFiddle： -

http://jsfiddle.net/273x2f13/1/

// Create the chart 
$.getJSON("https://api.myjson.com/bins/gdpu7", function(data){ 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Date Vs Rsponses' 
    }, 
    subtitle: { 
     text: 'Chart View Here' 
    }, 
    xAxis: { 
     type: 'category' 
    }, 
    yAxis: { 
     title: { 
      text: 'Responses' 
     } 

    }, 
    legend: { 
     enabled: false 
    }, 
    plotOptions: { 
     series: { 
      borderWidth: 0, 
      dataLabels: { 
       enabled: true, 
       format: '{point.y:.1f}%' 
      } 
     } 
    }, 

    tooltip: { 
     headerFormat: '<span style="font-size:11px">{series.name}</span><br>', 
     pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>' 
    }, 

    series: [{ 
     x: 'receive_date', 
     y: 'responses' 
     colorByPoint: true, 
     data: data 
    }] 


}); 

私はそれをX軸とY軸の値を与えるために、これを使用しています。しかし、それは正しいわけではありません。

series: [{ 
      x: 'receive_date', 
      y: 'responses' 
      colorByPoint: true, 
      data: data 
     }] 

Answer 1

Array#mapを使用してください。例えば

：

xAxis: { 
    type: 'category', 
    categories: data.map(function(x) { 
    return x.receive_date; 
    }) 
}, 

そして、この：このような

series: [{ 
    colorByPoint: true, 
    data: data.map(function(x) { 
    return x.responses * 1; // Convert to a number. 
    }) 
}] 

何か：

$(function() { 
 
    $.getJSON("https://api.myjson.com/bins/gdpu7", function(data) { 
 
    console.log(data); 
 
    Highcharts.chart('container', { 
 
     chart: { 
 
     type: 'column' 
 
     }, 
 
     title: { 
 
     text: 'Date Vs Rsponses' 
 
     }, 
 
     subtitle: { 
 
     text: 'Chart View Here' 
 
     }, 
 
     xAxis: { 
 
     type: 'category', 
 
     categories: data.map(function(x) { 
 
      return x.receive_date; 
 
     }) 
 
     }, 
 
     yAxis: { 
 
     title: { 
 
      text: 'Responses' 
 
     } 
 
     }, 
 
     legend: { 
 
     enabled: false 
 
     }, 
 
     plotOptions: { 
 
     series: { 
 
      borderWidth: 0, 
 
      dataLabels: { 
 
      enabled: true, 
 
      format: '{point.y:.1f}' 
 
      } 
 
     } 
 
     }, 
 
     tooltip: { 
 
     headerFormat: '<span style="font-size:11px">{series.name}</span><br>', 
 
     pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>' 
 
     }, 
 
     series: [{ 
 
     colorByPoint: true, 
 
     data: data.map(function(x) { 
 
      return x.responses * 1; 
 
     }) 
 
     }] 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto;"></div>

Answer 2

別

$.getJSON("https://api.myjson.com/bins/gdpu7", function(data) { 

    var chart = Highcharts.chart('container', { 
    xAxis: { 
     type: 'datetime' 
    }, 

    series: [{ 
     data: data.map(function(p) { 
     var ymd = p.receive_date.split("-"); 
     return [Date.UTC(ymd[0], ymd[2] - 1, ymd[1]), parseInt(p.responses)]; 
     }) 
    }] 
    }); 
}); 

ライブデモ：http://jsfiddle.net/kkulig/da6Lejy7/

アプローチは、 'datetime'にx軸の種類を変更してタイムスタンプに receive_date特性を変換することです