javascript - 如何在饼图js中显示数据库中的百分比数据？

Question

我有一个简单的部分，其中显示数据库中的数据，现在我想用这样的百分比显示这些数据

这是我的解决方案

$.ajax({
  type: 'GET',
  url: "https://meed.audiencevideo.com/admin/chats/stats.php",
  success:function(data)  {

    var session = [];
    var yes = [];
    var no =[]

            for (var i = 0; i < data.length; i++) {
              session.push(data[i].sessions);
              yes.push(data[i].num_yes);
              no.push(data[i].num_no);
            }
            console.log("session ", + session);
            console.log("Yes " +  yes);
            console.log("No " +  no);
            var data = [{
              data: [session,yes, no],
              labels: ["session", "yes", "no"],
              backgroundColor: [
                  "#4b77a9",
                  "#5f255f",
                  "#d21243",
              ],
              borderColor: "#fff"
          }];

             var options = {
             tooltips: {
           enabled: false
      },
               plugins: {
              datalabels: {
                  formatter: (value, ctx) => {

                    let sum = 0;
                    let dataArr = ctx.chart.data.datasets[0].data;
                    dataArr.map(data => {
                        sum += data;
                    });
                    let percentage = (value*100 / sum).toFixed(2)+"%";
                    return percentage;


                  },
                  color: '#fff',
                       }
          }
      };

          var ctx = document.getElementById("myPieChart").getContext('2d');
           var myChart = new Chart(ctx, {
          type: 'pie',
          data: {
              datasets: data
          },
                options: options
      });

    }
  });

上述解决方案向我显示以下内容

在所有数据上显示 0.00%，在控制台上我有这个

session  2714
Yes 390
No 111

当我像这样从数据库传递数据时:data: [session, yes, no] 我得到0.00%

但是，如果我像这样手动传递数据:data: [2714, 390, 111]，我会在饼图上获得带有百分比的数据。

我的代码做错了什么？任何帮助或建议将不胜感激

Answer 1

将所有内容都转化为百分比。您需要计算它们。

像这样:

var total = session + total_yes + total_no;
session = (session / total) * 100;
total_yes = (total_yes / total) * 100;
total_no= (total_no / total) * 100;

然后在您的图表数据中，只需使用它们:

var chartdata = {
      labels: ['session', 'yes', 'no'],
      datasets: [
        {
          label: 'session',
          backgroundColor: ['#00a65a', '#FF00FF'],
          highlight: '#00c0ef',
          data: session
        },
        {
          label: 'yes',
          backgroundColor: ['#00a65a', '#FF00FF'],
          highlight: '#00c0ef',
          data:total_yes
        },
          {
          label: 'no',
          backgroundColor: ['#00a65a', '#FF00FF'],
          highlight: '#00c0ef',
          data:total_no
        }
      ]
    }

如果您需要添加更多项目，只需将其添加到总变量中，他们会执行相同的操作来获取百分比，然后将其添加到图表数据中。等等。