react-chartjs-2中子标签标签

Question

我正在尝试在百分比下添加百分比和子标签。我尝试过不同的方法，但对我来说什么都不起作用。

以下是我的甜甜圈图表代码：

   <Doughnut
      data={{
        labels: data.mainChart.labels,
        datasets: data.mainChart.datasets
      }}
      options={data.mainChart.options}
    />

下面是我传递给该图表的配置。

 mainChart: {
 
  datasets: [],
  options: {
    cutoutPercentage: 66,
    spanGaps: false,
    legend: {
      display: true,
      position: "right",
      labels: {
        padding: 16,
        usePointStyle: true,
        generateLabels:function(){
          const labels=["de 0 à 4", "+4j", "+15J", "+45J", "+90J", "+150J"];
          return labels
        }
      }
    },
    maintainAspectRatio: false
  }
}

以下是我想要实现的期望输出。

​

Answer 1

这就是我发现的问题。

您正在将字符串数组传递给generateLabels()。

但它将图例项作为参数

为图例中的每个事物生成图例项。默认实现返回颜色框的文本+样式。详情请参见Legend Item。

因此，您需要一个具有一些属性的对象来执行此操作。

举个例子，

<Doughnut
        data={this.state.data}
        options={{
          responsive: true,
          maintainAspectRatio: true,
          cutoutPercentage: 66,
          spanGaps: false,
          legend: {
            display: true,
            position: 'right',
            labels: {
              padding: 16,
              usePointStyle: true,
              generateLabels: function() {
                const labels = [
                  {text:'dsfd'},
                  {text:'fsdf'},
                  {text:'sdfsdf'}
                ];
                return labels;
              }
            }
          }
        }}
      />