Question

我想用chart.js创建一个饼图，但无法显示该图。我花了一天的时间来解决这个问题，但是没有取得好的结果。我希望有人能帮助我。

我的数据库有不同的公司，我需要计算每个公司的总销售额并显示在饼图中。

我认为问题将是 $ results_sum =“从gp那里选择SUM（total_of_gp_fee）AS Total 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>

Answer 1

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 + '%)';
                    }
                }
            },

Answer 2

我认为cshortcut拥有comany的名称，因此您可以通过一个查询来完成所有操作：

$results_sum = "SELECT cshortcut,SUM(total_of_gp_fee) AS Total FROM gp GROUP BY cshortcut";

您将获得一个数组，其中每个元素包含to元素（快捷键和Total）

无论如何，您的JS中有一个错误，您使用的数据中不存在的名称（total_of_gp_fee），因为您使用的是别名（Total），您应该更改：

        labels: [<?php while ($b = mysqli_fetch_array($result_cut)) { echo '"' . $b['cshortcut'] . '",';}?>],
        datasets: [{
                label: '# of Votes',
                data: [<?php while ($p = mysqli_fetch_array($sum)) { echo '"' . $p['Total'] . '",';}?>],

如何从mysql检索数据到chart.js

2 个答案: