我有一个名为total_summary的表,其中包含4个字段-[Date],[Month / Year],[Dredger]和[Barge Volume]。
我正在尝试生成一个多条形图,以显示按日期分组的每个挖泥船的总量。下面是我编写的用于生成图形的代码:
PHP:
<?php
$datelist = "";
$dredgelist = "";
$volumedata = "";
$datearray = "'2019-10-01";
$title = "'Dredging Volume'";
$chartype = "'bar'";
$barcolor = "'rgb(252, 155, 155, 0.5)'";
$x_title = "'Date'";
$yline = "true";
$xline = "false";
$bkcolor = "#F5F5F5";
$sql_query = "SELECT [date], [Dredger], SUM([Barge Volume]) AS 'Dredging Volume' FROM OVERALL_SUMMARY_ORIGINAL
WHERE [Month/Year] in ($datearray) GROUP BY [Date], [Dredger] order by [Date], [Dredger]";
$stmt = sqlsrv_query($conn, $sql_query);
while($row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_NUMERIC)){
$datelabel = $row[0]->format('Y/m/d');
$dredger = $row[1];
$vol = $row[2];
$datelist = $datelist."'".$datelabel."',";
$datelist_2 = trim($datelist,",");
$dredgelist = $dredgelist."'".$dredger."',";
$dredgelist_2 = trim($dredgelist,",");
$volumedata = $volumedata.$vol.",";
$volumedatalist = trim($volumedata,",");
}
?>
<canvas id="myChart2" style="background-color:<?php echo $bkcolor; ?>; height:400px;"></canvas>
Javascript
<script type="text/javascript">
/*****first chart********/
var ctx = document.getElementById('myChart2').getContext('2d');
var myChart = new Chart(ctx, {
type:<?php echo $chartype; ?>,
data : {
labels: [<?php echo $datelist_2; ?>], <!--label name->
datasets: [
{
label: [<?php echo $dredgelist_2;?>],
data: [<?php echo $volumedatalist; ?>],
backgroundColor: <?php echo $barcolor; ?>
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}}
},
scales: {
xAxes: [
{
stacked: true ,
scaleLabel: {
display: true,
labelString: <?php echo $x_title; ?>,
fontSize: 11,
fontStyle: "bold"
},
ticks: {
fontSize: 11
},
gridLines: {
display: <?php echo $xline; ?>
}
}],
yAxes: [
{
stacked: true,
scaleLabel: {
display: true,
labelString: 'Barge Volume (m3)',
fontSize: 11,
fontStyle: "bold"
},
ticks: {
fontSize: 11,
beginAtZero:true,
userCallback: function(value, index, values) {
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(',');
return value;
}
},
gridLines: {
display: <?php echo $yline; ?>
}
}
]
},
legend: {
display: true,
labels: {
fontSize: 15,
fontStyle: "bold",
padding: 16
},
position: 'top'
},
title: {
display: true,
text: <?php echo $title; ?>,
fontSize: 15
},
plugins: {
datalabels: {
display: true,
align: 'center',
anchor: 'center'
}
}
}
});
</script>
我试图让Chart js生成一个多柱形柱形图,如下所示。我该如何实现?我已经尝试解决了几天,但无济于事。谁能指导我?谢谢
我想唯一的方法是创建多个数据集而不是一个。这可能不是最佳答案,但这是我做到的方式。
<script type="text/javascript">
/*****first chart********/
var ctx = document.getElementById('myChart2').getContext('2d');
var myChart = new Chart(ctx, {
type:<?php echo $chartype; ?>,
data : {
labels: [<?php echo $datelist_2; ?>], <!--label name->
datasets: [
{
label: [<?php echo $dredgelist_2;?>],
data: [<?php echo $volumedatalist; ?>],
backgroundColor: <?php echo $barcolor; ?>
},
{
label: [<?php echo yourVariable;?>],
data: [<?php echo yourVariable; ?>],
backgroundColor: <?php echo yourColor; ?>
},
{
label: [<?php echo yourVariable;?>],
data: [<?php echo yourVariable; ?>],
backgroundColor: <?php echo yourColor; ?>
},
{
label: [<?php echo yourVariable;?>],
data: [<?php echo yourVariable; ?>],
backgroundColor: <?php echo yourColor; ?>
}
]
},
options: {
responsive: true,
..............
.............
.........
</script>