ChartJS 与chart jsReact，在圆环图的多个数据集中标注问题

kdfy810k 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(205)

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

这是图表的屏幕截图。x1c 0d1x
为什么它不呈现两个图形？有什么建议吗？
---编辑
我也试过完全没有tooltips。在这种情况下，两个圆环图被正确呈现，但每个数据标签都变得未定义。

chart.js

来源：https://stackoverflow.com/questions/49314776/react-with-chart-js-labelling-problems-in-multiple-datasets-for-doughnut-chart

2条答案

按热度按时间

yebdmbv41#

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

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",
    ]
  },
]

赞(0）回复(0）举报 2022-11-06

s8vozzvw2#

问题是第一个数据集被复制到另一个数据集上，因为库无法识别两者之间的差异，这是因为没有为它们指定唯一键（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>
          )
        }

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS 与chart jsReact，在圆环图的多个数据集中标注问题

2条答案

相关问题

热门标签

最新问答