个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 02:39:10 24 4
gpt4 key购买 nike

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

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

我认为问题是$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组的SUM。

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

关于javascript - 如何从 mysql 检索数据到 chart.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56473924/

24 4 0
文章推荐： android - 我只能用ViewPager向后翻页，不能向前翻页
文章推荐： ios - UINavigationController 的 viewControllers 属性在 IOS7 和 iOS8 中返回不同的对象
文章推荐： Android Dagger 并在任意时刻设置模块
文章推荐： java - 无法创建 EGL 上下文
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com