Question

我正在使用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。在这种情况下，正确呈现两个圆环图，但数据的每个标签都未定义。

Answer 1

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

Date

Answer 2

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

在使用 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>
          )
        }

与图表js反应，为多边形图表标记多个数据集中的问题

2 个答案: