我正在尝试使用HighCharts JS绘制图形。我有一个JSON文件,例如,
[{"receive_date":"2013-11-04","responses":"2"}]
JSON:-https://api.myjson.com/bins/gdpu7
receive_date
应为X轴,responses
应为Y轴。我正在加载远程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
}]
您应该使用 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>
另一种方法是将X轴的类型更改为'datetime'
,然后将receive_date
属性转换为时间戳:
$.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/