从JSON创建HighCharts-Column类型 [英] Create HighCharts-Column type from JSON

问题描述

I am trying to create a column type highchart using data from json in the following format:

X轴应显示日期值，Y轴应显示计数。不知何故，我无法以所需的格式转换此JSON。

[{"id":7,"dateV":"2015-11-16","count":10},{"id":6,"dateV":"2015-11-15","count":3},{"id":5,"dateV":"2015-11-14","count":15},{"id":4,"dateV":"2015-11-13","count":10},{"id":3,"dateV":"2015-11-12","count":6},{"id":2,"dateV":"2015-11-11","count":8},{"id":1,"dateV":"2015-11-10","count":5}]

这是我的代码。

X axis should show the date values and the Y axis should show the count. Somehow i am not able to transform this JSON in the format required.

Here is my code.

控制台日志以上述格式显示JSON。我猜我必须从选项数组中形成x和y轴的值。我该怎么做呢？

<script type="text/javascript"> $('#myButton').click(function() { var options = { chart: { renderTo: 'chartContainerDiv', type: 'column' }, series: [{}] }; var url = "callToControllerURL"; $.getJSON(url, function(data) { console.log(JSON.stringify(data)); options.series[0].data = JSON.stringify(data); var chart = new Highcharts.Chart(options); }); }); </script>

/ p>

You need to iterate over the json data and create category data and series by pushing values.

var jsonData = [{"id":7,"dateV":"2015-11-16","count":10},{"id":6,"dateV":"2015-11-15","count":3},{"id":5,"dateV":"2015-11-14","count":15},{"id":4,"dateV":"2015-11-13","count":10},{"id":3,"dateV":"2015-11-12","count":6},{"id":2,"dateV":"2015-11-11","count":8},{"id":1,"dateV":"2015-11-10","count":5}]; 

 var categoryData= [];
 var seriesData= [];
$.each(jsonData, function(i,item){
seriesData.push(jsonData[i].count);
categoryData.push(jsonData[i].dateV);
console.log("seriesData"+JSON.stringify(seriesData));
}); 

请参阅在这里使用你的json进行演示

这篇关于从JSON创建HighCharts-Column类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！