与图表 js 反应，在多个数据集中为圆环图标记问题答案

【问题标题】：React with chart js, labelling problems in multiple datasets for doughnut chart与图表 js 反应，在多个数据集中为圆环图标记问题
【发布时间】：2021-03-25 04:15:56
【问题描述】：

我正在使用react-chartjs-2 来可视化数据。

我想制作一个嵌套的圆环图。 https://jsfiddle.net/moe2ggrd/152/ 这个链接显示了我想如何可视化两个不同的数据集。

以上示例显示，如果我使用tooltip 标记每个数据，它会创建具有正确名称的嵌套圆环图。但是，当我尝试让它在我的项目中工作时，它只显示一个圆环图。

下面是我渲染圆环图的渲染函数。

render() {
  const data = {
    datasets: [
      {
        data: [1, 2, 3],
        labels: ["category1", "category2", "category3"],
        backgroundColor: [                
          "#79CAF2",
          "#80DEEA",
          "#A5D6A7",
        ],
        hoverBackgroundColor: [            
          "#31B2F2",
          "#00BCD4",
          "#4CAF50",
        ]
      },
      {
        data: [1, 2, 3, 4, 5],
        labels: ["sub1", "sub2", "sub3", "sub4", "sub5"],
        backgroundColor: [                
          "#79CAF2",
          "#80DEEA",
          "#A5D6A7",
          "#C5E1A5",
          "#FFF59D",
        ],
        hoverBackgroundColor: [            
          "#31B2F2",
          "#00BCD4",
          "#4CAF50",
          "#8BC34A",
          "#FFEB3B",
        ]
      },
    ]
  };

  const options = {
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var dataset = data.datasets[tooltipItem.datasetIndex];
          var index = tooltipItem.index;
          return dataset.labels[index] + ': ' + dataset.data[index];
        },
      }
    }   
  }

  return (
    <div className="h100per_200pix w100per margin_top_50">
      <DoughnutChart data={data} options={options} ref="chart" />
    </div>
  )
}

这是图表的截图。

为什么不渲染两张图？有什么建议吗？

--- 编辑

我也试过完全没有tooltips。在这种情况下，两个圆环图正确呈现，但数据的每个标签都未定义。

【问题讨论】：

标签： javascript reactjs chart.js

【解决方案1】：

您需要为每个图表添加不同的标签：

datasets: [
  {
    label: "chart1",
    data: [1, 2, 3],
    labels: ["category1", "category2", "category3"],
    backgroundColor: [                
      "#79CAF2",
      "#80DEEA",
      "#A5D6A7",
    ],
    hoverBackgroundColor: [            
      "#31B2F2",
      "#00BCD4",
      "#4CAF50",
    ]
  },
  {
    label: "chart2",
    data: [1, 2, 3, 4, 5],
    labels: ["sub1", "sub2", "sub3", "sub4", "sub5"],
    backgroundColor: [                
      "#79CAF2",
      "#80DEEA",
      "#A5D6A7",
      "#C5E1A5",
      "#FFF59D",
    ],
    hoverBackgroundColor: [            
      "#31B2F2",
      "#00BCD4",
      "#4CAF50",
      "#8BC34A",
      "#FFEB3B",
    ]
  },
]

【讨论】：

【解决方案2】：

问题在于第一个数据集被复制到另一个数据集上，因为库无法识别两者之间的差异。这是因为没有为它们指定唯一键（key 或 label）。

在使用 react-chartjs-2 库中的多个数据集时，该库需要在触发重新渲染图表的任何事件（例如工具提示）中跟踪数据集系列中的更改，更新 onClick 事件的图表等）。

在这种情况下，您可以执行以下操作之一：

在每个数据集上添加label 属性（默认情况下，库将此作为识别数据集的关键。）。这些标签对于每个数据集应该是唯一的。

     render() {
          const data = {
            datasets: [
              {
                label:"chart1",
                data: [1, 2, 3],
                ...
              },
              {
                label:"chart2",
                data: [1, 2, 3, 4, 5],
                ...
              },
            ]
          };
           
          ...
        
          return (
            <div className="h100per_200pix w100per margin_top_50">
              <DoughnutChart data={data} options={options} ref="chart" />
            </div>
          )
        }

（推荐）在每个数据集上添加 key 属性，指定一个唯一的字符串。将 datasetKeyProvider 属性添加到图表组件。然后将一个函数传递给 datasetKeyProvider 属性，返回每个数据集的唯一键。

     render() {
          const data = {
            datasets: [
              {
                key:"D1",
                label:"chart1",
                data: [1, 2, 3],
                ...
              },
              {
                key:"D2",
                label:"chart2",
                data: [1, 2, 3, 4, 5],
                ...
              },
            ]
          };
           
          ...

          getDatasetKey = (d) => {return d.key};

          return (
            <div className="h100per_200pix w100per margin_top_50">
              <DoughnutChart
                   datasetKeyProvider={this.getDatasetKey}
                   data={data} options={options} ref="chart" />
            </div>
          )
        }

【讨论】：