chart.jsで円グラフを作成したいのですが、グラフが表示されません。この問題を解決するために1日を費やしましたが、良い結果は得られませんでした。誰かが私を助けてくれることを願っています。
私のデータベースにはさまざまな会社があります。各会社の総売上高を計算して円グラフで表示する必要があります。
問題は$ results_sum = "SELECT SUM(total_of_gp_fee)AS Total FROM gp WHERE cshortcut
= $ subjectData( 'cshortcut')";だと思います。、さまざまな会社の販売実績が多く、それが正しいコードかどうかはわかりません。
<?php
include_once("connection.php");
$results_sum = "SELECT cshortcut,SUM(total_of_gp_fee) AS Total FROM gp GROUP BY cshortcut";
$result_sum = mysqli_query($conn, $results_sum) or die("error to fetch data");
if ($result_sum->num_rows > 0) {
// output data of each row
$labels = $data = '';
while($row = $result_sum->fetch_assoc()) {
//get the company name separated by comma for chart labels
$labels.= '"' .$row["cshortcut"]. '",';
//get the total separated by comma for chart data
$data.= $row["Total"].',';
}
}?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<script src="chart/Chart.bundle.js"></script>
</head>
<body>
<div class="container">
<canvas id="myChart" width="300" height="100"></canvas>
</div>
スクリプト部分
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: [<?php echo trim($labels);?>],
datasets: [{
label: '# of Votes',
data: [<?php echo trim($data);?>],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
//Add the tooltips
tooltips: {
callbacks: {
label: function(tooltipItem) {
return "€ " + Number(tooltipItem.yLabel);
}
}
},
}
},
);
</script>
1-会社名とtotal_of_gp_feeグループの合計を会社ごとに取得します。
include_once("connection.php");
//get the company name and total_of_gp_fee of that company.
$results_sum = "SELECT cshortcut,SUM(total_of_gp_fee) AS Total FROM gp GROUP BY cshortcut";
$result_sum = mysqli_query($conn, $results_sum) or die("error to fetch data");
if ($result_sum->num_rows > 0) {
// output data of each row
$labels = $data = '';
while($row = $result_sum->fetch_assoc()) {
//get the company name separated by comma for chart labels
$labels.= '"' .$row["cshortcut"]. '",';
//get the total separated by comma for chart data
$data.= $row["Total"].',';
}
}
2-チャートのラベルとデータの値を更新します。
labels: [<?php echo trim($labels);?>],
datasets: [{
label: '# of Votes',
data: [<?php echo trim($data);?>],
3-棒グラフのツールチップを追加します。
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
//Add the tooltips
tooltips: {
callbacks: {
label: function(tooltipItem) {
return "€" + Number(tooltipItem.yLabel);
}
}
},
}
4-円グラフのツールチップを追加します。
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var allData = data.datasets[tooltipItem.datasetIndex].data;
var tooltipData = allData[tooltipItem.index];
var total = 0;
for (var i in allData) {
total += allData[i];
}
var tooltipPercentage = Math.round((tooltipData / total) * 100);
return "€" + ': ' + tooltipData + ' (' + tooltipPercentage + '%)';
}
}
},
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加