javascript - 悬停时从 Chart.js 中删除数据文本

Question

我正在使用 Chart.js 制作圆环图。悬停在 donut 部分时，我试图显示“40% 的人”，但它在“数据集”对象中显示的数据显示“40% 的人:40”。如果将鼠标悬停在 donut 的海军部分，您将看到数据显示。我已经尝试在数据数组上进行 javascript 拆分和拼接，但无法删除 : 40 。我的问题是如何为每个标签显示:“People 40%”而不是“People 40%: 40”等等？

https://codepen.io/zepzia/pen/WdrWww

  <div class="wrapper">
    <canvas id="commitments-area" width="200" height="200"></canvas>
  </div>


.wrapper {
  height: 200px;
  width: 200px;
  margin: 0 auto;
}


var oilCanvas = document.getElementById("commitments-area");

Chart.defaults.global.defaultFontSize = 12;
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips;



var oilData = {
    labels: [
        "People (40%)",
        "Aliens (32%)",
        "Dogs (13%)",
        "Whales (15%)"
    ],
    datasets: [
        {

            data: [40, 32, 13, 15],
            backgroundColor: [
                "#13284a",
                "#4b9cd3",
                "#3b7ca7",
                "#99cdec",
                "#84d1ff"
            ]
        }]
};

var chartOptions = {
    legend: {
      position: 'bottom'
    },

    animation: {
      animateRotate: true,
      animateScale: true
    },


};

var pieChart = new Chart(oilCanvas, {
  type: 'doughnut',
  data: oilData,
  options: chartOptions
});

Answer 1

这就是答案，我已经在此处发布了 codepen 中的 js，请参阅更新的“选项”，代码段底部的“return tootipLabel”部分以获得您正在寻找的 X% 结果。

归功于 http://blog.cryst.co.uk/2016/06/03/adding-percentages-chart-js-pie-chart-tooltips/为我指明了正确的方向:

var oilCanvas = document.getElementById("commitments-area");

Chart.defaults.global.defaultFontSize = 12;
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips;



var oilData = {
    labels: [
        "People",
        "Aliens",
        "Dogs",
        "Whales"
    ],
    datasets: [
        {

            data: [40, 32, 13, 15],
            backgroundColor: [
                "#13284a",
                "#4b9cd3",
                "#3b7ca7",
                "#99cdec",
                "#84d1ff"
            ]
        }]
};

var chartOptions = {
    legend: {
      position: 'bottom'
    },

    animation: {
      animateRotate: true,
      animateScale: true
    },


};

var pieChart = new Chart(oilCanvas, {
  type: 'doughnut',
  data: oilData,
      options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var allData = data.datasets[tooltipItem.datasetIndex].data;
                    var tooltipLabel = data.labels[tooltipItem.index];
                    var tooltipData = allData[tooltipItem.index];
                    var total = 0;
                    for (var i in allData) {
                        total += allData[i];
                    }
                    var tooltipPercentage = Math.round((tooltipData / total) * 100);
                    return tooltipLabel + ': ' + ' ' + tooltipPercentage + '%';
                }
            }
        }
    }
});

.wrapper {
  height: 200px;
  width: 200px;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div class="wrapper">
<canvas id="commitments-area" width="200" height="200"></canvas>
</div>