react-chartjs-2 中带有子标签的标签答案

【问题标题】：Label with sub label in react-chartjs-2react-chartjs-2 中带有子标签的标签
【发布时间】：2021-09-03 23:12:49
【问题描述】：

我正在尝试在百分比下添加百分比和子标签。我尝试了不同的方法，但对我没有任何作用。

这是我的圆环图代码：

   <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
  }
}

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

【问题讨论】：

标签： reactjs react-chartjs react-chartjs-2

【解决方案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;
              }
            }
          }
        }}
      />

【讨论】：

谢谢你。您能帮我在标签上方添加一个百分比吗？
有趣的是文本是一个字符串而不是一个反应组件，所以我需要检查它是否可能。