원격 JSON 파일에서 Highcharts 그래프 플롯

Question

Highcharts JS를 사용하여 그래프를 플롯하려고합니다. https://api.myjson.com/bins/gdpu7

receive_date X 축이어야하며 responses는 Y 축해야한다 -이 : 나는 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 속성을 변환하는 것입니다