要求来自 MySql 数据的条形图，我有静态条形图的工作代码，代码如下 -->
<script>
var data = [
[0, 11], //London, UK
[1, 15], //New York, USA
[2, 25], //New Delhi, India
[3, 24], //Taipei, Taiwan
[4, 13], //Beijing, China
[5, 18] //Sydney, AU
];
var dataset = [
{ label: "barchart", data: data, color: "#5482FF" }
];
var ticks = [
[0, "London"],
[1, "New Mumbai"],
[2, "New Delhi"],
[3, "Taipei"],
[4, "Beijing"],
[5, "Sydney"]
];
<script>
但是对于动态条形图，数据来自数据库，数据也是数组格式，如下所示
Array
(
[0] => Array
(
[product] => abc
[total] => 21
)
[1] => Array
(
[product] => xyz
[total] => 1
)
[2] => Array
(
[product] => pqr
[total] => 13
)
)
如何根据这些数据创建条形图？或任何建议？
最佳答案
二手 chart.js
图表文件http://www.chartjs.org/docs/
条形图示例。希望对您有所帮助
<!doctype html>
<html>
<head>
<title>Bar Chart</title>
<script src="Chart.js"></script>
<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
<style>
canvas{
}
</style>
</head>
<body>
<canvas id="canvas" height="450" width="600"></canvas>
<?php
$array=array
(
'0' => array
(
'product' => 'abc',
'total' => 21
),
'1' => array
(
'product' => 'xyz',
'total' => 1
),
'2' => array
(
'product' => 'pqr',
'total' => 13
)
);
?>
<script>
var lab=[];
var data=[];
<?php
foreach($array as $tem)
{
?>
lab.push('<?php echo $tem['product']; ?>');
data.push('<?php echo $tem['total']; ?>');
<?php }
?>
var barChartData = {
labels : lab,
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : data
},
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
</script>
</body>
</html>
关于javascript - 使用php和mysql的条形图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28230205/