Chart.js-数据标签未使用格式化程序显示

Question

我正在尝试使用来自Chartjs的datalabels的插件，但标签根本不会显示在图形上！我正在使用> = 2.7.0（实际上是2.9.0）版本的Chart.js。

这是我的代码：

var ctx = this.pieChartRef.nativeElement;
    this.pieChart = new Chart(ctx, {
      type: 'pie',
      data: {
        labels: Object.keys(pieData),
        datasets: [
          {
            data: Object.values(pieData),
            backgroundColor: random,
          },
        ],
      },
      options: {
        legend: {
          position: 'bottom',
          display: true,
        },
        plugins: {
          datalabels: {
            color: '#fff',
            display: true,
            formatter: function (value, ctx) {
              let sum = 0;
              let dataArr: number[] = ctx.chart.data.datasets[0]
                .data as number[];
              dataArr.map((data) => {
                sum += data;
              });
              return ((value * 100) / sum).toFixed(2) + '%';
            },
          },
        },
      },
    });

即使我用简单的return value + '%';替换格式化程序代码，也没有显示数据标签，请您帮帮我，我被卡住了！

提前谢谢您

Answer 1

您是否尝试将chart.js降级到2.7.3并运行它？似乎是较高版本的问题。如果可能，请发布演示链接。

Answer 2

首先，此问题not与版本（2.7 VS 2.9等）相关。通常，请添加一个演示。

我想您希望[5,5]数据显示为50% 50%和[3,3,3]，分别为33％/ 33％/ 33％。

您的问题与计算有关。

sum看起来是“ buggy”（console.log值）。回调运行[[more超过一次（每个标签一次）-然后您将loop放入throw数组内，并一次又一次声明此数组。

let dataArr: number[] = ctx.chart.data.datasets[0].data as number[];
dataArr.map((data) => {
  sum += data;
});

此示例工作正常（无嵌套循环）：

var pieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['January', 'February'],
    datasets: [{
      label: 'My First dataset',
      data: [5, 10],
      backgroundColor: ["red", "blue"]
    }]
  },
  options: {
    legend: {
      position: 'bottom',
      display: true,
    },
    plugins: {
      datalabels: {
        color: '#fff',
        display: true, 
        formatter: function (value, ctx) {
          return ((value * 100) / total(ctx)).toFixed(2) + '%';
        },
      },
    },
  },
})

function total(chart){
  let data = chart.chart.data.datasets[0].data;
  const reducer = (accumulator, currentValue) => accumulator + currentValue;
  var total = data.reduce(reducer);
  return total;
}

<div id="wrapper">
  <canvas id="ctx" width="500" height="450"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>

干燥
上面的代码也有点
可重复

-如果在chart.js对象之外声明数据，则只能计算一次data total。

var data = [4, 9, 5, 2];
/* get total */
const reducer = (accumulator, currentValue) => accumulator + currentValue;
var total = data.reduce(reducer);

var pieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['January', 'February', 'March', 'April'],
    datasets: [{
      label: 'My First dataset',
      data: data,
      backgroundColor: ["red", "blue", "green", "violet"]
    }]
  },
  options: {
    legend: {
      position: 'bottom',
      display: true,
    },
    plugins: {
      datalabels: {
        color: '#fff',
        display: true, 
        formatter: function (value, ctx) {
          return ((value * 100) / total).toFixed(2) + '%'; 
        },
      },
    },
  },
})

<div id="wrapper">
  <canvas id="ctx" width="500" height="450"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>

更干燥/模块化？ （用于可变数据）将全部数据放入函数等中。