在piechart中显示百分比而不是计数

sczxawaw 于 2023-08-05 发布在 Chart.js

关注(0)|答案(2)|浏览(116)

我正在使用chart.js和chartjs-plugin-datalabels插件。现在图形显示计数，同时悬停图形和图形内部。但是我想在图表中显示百分比而不是计数。我怎么能这么做呢？
我的codepen链接-https://codepen.io/kaushik-kowboy/pen/BaGxKwy

<!DOCTYPE html>
<html>
<head>
  <title>Total Chart - Pie Chart with Labels</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
  <style>
    #totalChart{
        width: 400px !important;
        height: 400px !important;
    }
  </style>
</head>
<body>
  <div style="text-align: center;">
    <h2>Total Chart - Pie Chart with Labels</h2>
    <canvas id="totalChart" width="400" height="400"></canvas>
  </div>

  <script>
        var totalLabels = ["HD","SKY"];
        var totalData = ["138","251"];

        // Generate Facebook pie chart
        var facebookCtx = document.getElementById('totalChart');
        new Chart(facebookCtx, {
            type: 'pie',
            data: {
                labels: totalLabels,
                datasets: [{
                    label: 'no of Leads',
                    data: totalData,
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            },
            plugins: [ChartDataLabels],
                options: {
                        
                }
        });
  </script>
</body>
</html>```


I have tried to display the percentage amount using ChartDataLabels. but I don't know how to do that. Right now only count is showing.

字符串

chart.js

来源：https://stackoverflow.com/questions/76709940/showing-percentage-instead-of-count-inside-piechart

2条答案

按热度按时间

svujldwt1#

无论你想添加百分比，你应该写一个Map函数。
不使用totalData，

totalData.map((ele)=>(ele/totalData.reduce(arrayTotal)*100)

个字符
我使用了reducer函数，因为我认为您的图表数据可能是动态的。你可以找到你的总数最初also.like写一个单独的函数，将找到你的数据总数。
下面是reducer函数

function arrayTotal(total, num) {
  return total + num;
}

型
或者你可以使用一个简单的for循环来查找数组total，它将遍历并查找total。

赞(0）回复(0）举报 2023-08-05

vfwfrxfs2#

我终于找到解决办法了！
我只是改变了我的js代码，我将它附在下面

// Generate Total pie chart
totalLabelss = ["HD","SKY"];
totalDatas = [138,251];
    
var totaldata = [{
  data: totalDatas,
  backgroundColor: [
    "#4b77a9",
    "#5f255f", 
  ],
  borderColor: "#fff",
  label: ' No of Leads',
}];
var options = {
  tooltips: {
    enabled: false
  },
  plugins: {
    datalabels: {
      formatter: (value, ctx) => {
        const datapoints = ctx.chart.data.datasets[0].data
        const total = datapoints.reduce((total, datapoint) => total + datapoint, 0)
        const percentage = value / total * 100
        return percentage.toFixed(0) + "%";
      },
      color: '#fff',
    }
  }
};
var totalCtxs = document.getElementById("totalChart").getContext('2d');
new Chart(totalCtxs, {
      type: 'pie',
      data: {
      labels: totalLabelss,
        datasets: totaldata
      },
      options: options,
      plugins: [ChartDataLabels],
});

字符串
代码笔与解决方案的链接-https://codepen.io/kaushik-kowboy/pen/OJaBwZe

赞(0）回复(0）举报 2023-08-05

我来回答

在piechart中显示百分比而不是计数

2条答案

相关问题

热门标签

最新问答