[英]Looping data inside highchart.js using type column chart
I have and array of data and I want it to loop inside data[] for presenting a chart using Highchart.js
chart type is column
.我有一个数据数组,我希望它在 data[] 中循环以使用Highchart.js
图表类型为column
呈现图表。
When passing data from controller to view I have printed the graph using below code but now since the data is coming from ajax request how can I process the data to make a graph.当从控制器传递数据到视图时,我使用下面的代码打印了图形,但现在由于数据来自 ajax 请求,我如何处理数据以制作图形。
I have created one results
array and loop through each data and pushed inside the results and passed it directly to data in generateGraph
function, but the graph is not working.我创建了一个results
数组并遍历每个数据并将结果推入结果并将其直接传递给generateGraph
函数中的数据,但该图不起作用。
I am using ajax request to fetch data and pass it to the function defined for generating graph, below is my array data format.我正在使用 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
- data passing through rendering views from controller. 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'
}
}
}]
});
}
Notice that Highcharts requires the y
data value in a number format, not string.请注意,Highcharts 需要数字格式的y
数据值,而不是字符串。 Try this approach:试试这个方法:
let results=[];
item.forEach((val) => {
results.push([val.name, parseInt(val.number)])
});
Demo: https://jsfiddle.net/BlackLabel/Lds9cyau/演示: https : //jsfiddle.net/BlackLabel/Lds9cyau/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.