时间戳

首页 > 解决方案 > react-chartjs-2 中带有子标签的标签

reactjs - react-chartjs-2 中带有子标签的标签

问题描述

我正在尝试在百分比下添加百分比和子标签。我尝试了不同的事情，但对我没有任何帮助。

这是我的甜甜圈图代码：

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

这是我想要实现的期望输出。 在此处输入图像描述

标签： reactjsreact-chartjsreact-chartjs-2

解决方案

这是我发现的问题。

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

但它需要一个图例项作为参数

为图例中的每个事物生成图例项。默认实现返回颜色框的文本 + 样式。有关详细信息，请参见 图例项。

因此，您需要一个具有一些属性的对象来实现这一点。

举个例子，

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

推荐阅读