[英]Looping data inside highchart.js using type column chart
我有一个数据数组,我希望它在 data[] 中循环以使用Highchart.js
图表类型为column
呈现图表。
当从控制器传递数据到视图时,我使用下面的代码打印了图形,但现在由于数据来自 ajax 请求,我如何处理数据以制作图形。
我创建了一个results
数组并遍历每个数据并将结果推入结果并将其直接传递给generateGraph
函数中的数据,但该图不起作用。
我正在使用 ajax 请求来获取数据并将其传递给为生成图形定义的函数,下面是我的数组数据格式。
Ajax request
$.ajax({
url : someurl,
dataType: "json",
method: 'post',
beforeSend: function() {
$("#loader").show();
},
success: function( data ) {
$("#loader").hide();
generateGraph(data);
}
});
array data
[
{
name: "Bestozyme",
number: "1",
},
{
name: "Sinarest-PD",
number: "1",
},
{
name: "Azithral",
number: "1",
},
{
name: "Lecope-M-Kid",
number: "1",
},
{
name: "Calpol (250 MG)",
number: "1",
},
{
name: "Calapure",
number: "1",
},
]
using php code in series
- 数据通过控制器的渲染视图传递。
series: [{
name: 'Medicine',
color: '#F15C80',
data: [
<?php
foreach($data['medicine'] as $medi){
?>
['<?php echo $medi['name'];?>',<?php echo $medi['number'];?>],
<?php
}
?>
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
highchart.js
function generateGraph(item){
let results=[];
item.forEach((val) => {
results.push([val.name,val.number])
});
Highcharts.chart('medicine', {
chart: {
type: 'column'
},
title: {
text: ' '
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Medicine'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y}</b>'
},
series: [{
name: 'Medicine',
color: '#F15C80',
data: results,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
}
请注意,Highcharts 需要数字格式的y
数据值,而不是字符串。 试试这个方法:
let results=[];
item.forEach((val) => {
results.push([val.name, parseInt(val.number)])
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.