Question

我正在使用React ChartJS 2创建一些图形，但是我想在它们的顶部显示一个带有百分比的标签，当我将它们悬停在它们的实数上时。我发现您可以使用options对象上的上下文来做类似的事情。

var options = {
   tooltips: {
     enabled: false
   },
   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: '#fff',
     }
   }
 };

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

就像这样，但是我的问题是我无法在选项内使用上下文。

有人知道该怎么做吗？

Answer 1

您无需手动将context传递给datalabels的formatter函数，因为该插件会自行处理。

这是饼图的working example，上面指定了选项。

但是，如果要通过其他功能访问图表的context，则希望将其传递给options，则可以使用this.chart.ctx通过图表实例获取它。

var options = {
  animation: {
    onComplete: function () {
      var chartInstance = this.chart;
      var ctx = chartInstance.ctx; // chart context
    }
  }
};

将上下文传递给React ChartJS 2上的选项

1 个答案: