Question

让我说我对javascript和chart.js极为陌生，但我一直肩负学习的使命。我终于遇到了一个问题。我有一个饼图/甜甜圈图，我想在图表上显示百分比。因此，我要对数据集值求和，然后将当前值除以该总和以获得百分比。我的代码抛出了NaN，我确信这与我的数据有关。但我真的不确定如何调试它。

我有3个文件。连接到MySQL并提取数据的data2.php文件。我将在下面提供它提取的平均数据样本。然后我有我的app3.js，它带有我的jquery从PHP文件中提取数据。这是我遇到问题的格式化程序功能。我确实从网络上的其他地方借用了此代码，但我真的想尝试并了解如何调试此代码以弄清自己做错了什么。

<!DOCTYPE html>
<html>
    <body>
    <div id="chart-container">
    <h4>Turnover YTD Share</h4>
        <canvas id="ytdpie"></canvas>
    </div>

    <!-- javascript -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
    <script type="text/javascript" src="app3.js"></script>
</body>
</html>

然后这是我的data2.PHP输出

[{“名称”：“ shop1”，“营业额”：“ 131752.56”，“交易日期”：“ 2018”}，{“名称”：“ shop2”，“营业额”：“ 137962.93”，“交易日期” ：“” 2018“}，{”名称“：” shop3“，”营业额“：” 221743.78“，” TransDate“：” 2018“}，{”名称“：” shop4“，”营业额“：” 194462.63“，” TransDate“：” 2018“}，{”名称“：” shop5“，”营业额“：” 334374.19“，” TransDate“：” 2018“}，{”名称“：” shop6“，”营业额“：” 274830.83“ ，“ TransDate”：“ 2018”}，{“名称”：“ shop7”，“营业额”：“ 322485.53”，“ TransDate”：“ 2018”}，{“名称”：“ shop8”，“营业额”：“ 213896.70“，” TransDate“：” 2018“}，{”名称“：” shop9“，”营业额“：” 151293.13“，” TransDate“：” 2018“}，{”名称“：” shop10“，”营业额“ ：“ 305464.83”，“ TransDate”：“ 2018”}]

最后是我的app3.js

$(document).ready(function(){
$.ajax({
    url: "data2.php",
    method: "GET",
    success: function(data) {
        console.log(data);
        var Name = [];
        var Turnover = [];

        for(var i in data) {
            Name.push(data[i].Name);
            Turnover.push(data[i].Turnover);
        }

        var chartdata = {
            labels: Name,
            datasets : [
                {
                    label: 'Turnover YTD',
                    //backgroundColor: 'rgba(200, 200, 200, 0.75)',
                    backgroundColor: [
            'rgba(191, 66, 66, 0.4)',
            'rgba(191, 127, 63, 0.4)',
            'rgba(191, 191, 63, 0.4)',
            'rgba(127, 191, 63, 0.4)',
            'rgba(63, 191, 63, 0.4)',
            'rgba(63, 159, 127, 0.4)',
            'rgba(63, 191, 191, 0.4)',
            'rgba(63, 127, 191, 0.4)',
            'rgba(63, 63, 191, 0.4)',
            'rgba(127, 63, 191, 0.4)',
        ],
                    borderColor: 'rgba(200, 200, 200, 0.75)',
                    hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                    hoverBorderColor: 'rgba(200, 200, 200, 1)',
                    data: Turnover
                }
            ]
        };
var options = {
maintainAspectRatio: true,
legend: {
    display: true
},
plugins: {
              datalabels: {
            formatter: (value, ctx) => {

     let datasets = ctx.chart.data.datasets;

     if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {
       let sum = datasets[0].data.reduce((a, b) => a + b, 0);
       let percentage = Math.round((value / sum) * 100) + '%';
       return percentage;
     } else {
       return percentage;
     }
   },
            color: '#000',
                 }
  },

 };
        var ctx = $("#ytdpie");

        var barGraph = new Chart(ctx, {
            type: 'doughnut',
            data: chartdata,
            options: options


        });
    },
    error: function(data) {
        console.log(data);
    }
   });

   });

所以我几乎可以肯定这是我在函数中调用数据集的方式，但是我对这段代码的理解不充分，无法确定自己做错了什么。我看过的大多数例子都觉得应该可行。

   formatter: (value, ctx) => {

     let datasets = ctx.chart.data.datasets;

     if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {
       let sum = datasets[0].data.reduce((a, b) => a + b, 0);
       let percentage = Math.round((value / sum) * 100) + '%';
       return percentage;
     } else {
       return percentage;
     }
   }

Answer 1

因此，感谢@Pointy突出显示了我试图求和的字符串。然后@Margon向我展示了如何正确格式化我的代码行。

已替换：sum = datasets [0] .data.reduce（（a，b）=> a + b，0）;其中：sum = datasets [0] .data.reduce（（a，b）=> Number（a）+ Number（b），0）;

这解决了我的问题。谢谢大家的帮助。

Chart.js，Javascript，无法对数据集求和。 Javascript返回NaN，我不确定为什么

1 个答案: