Chart.js 具有外部功能的数据集选项

Question

我是 Chart.js 的新手，我正在我的项目中使用它。现在，Chart.js 为所有问题提供了一个非常好的解决方案，尽管我面临一个问题，我也想在外部提供数据集过滤器选项。例如，现在它是这种格式：

点击这些标签中的任何一个后，它们就会从图表中删除。我不想更改此功能，但我想在外部提供另一个具有相同功能的选项，就像这个模型：

我知道我可以在使用下拉菜单之前做一些计算并发送道具，但我想知道里面是否有其他方法 Chart.js 可以帮助我。我看过外用的图例选项，但看不懂。

Answer 1

Chart.js 在其示例页面上有一个 html 图例的示例：https://www.chartjs.org/docs/master/samples/legend/html.html

li.onclick = () => {
        const {type} = chart.config;
        if (type === 'pie' || type === 'doughnut') {
          // Pie and doughnut charts only have a single dataset and visibility is per item
          chart.toggleDataVisibility(item.index);
        } else {
          chart.setDatasetVisibility(item.datasetIndex, !chart.isDatasetVisible(item.datasetIndex));
        }
        chart.update();
      };

这里的 chart 和 item 是插件回调中的参数，所以如果您在不使用插件的情况下自己实现它，您将需要引用您自己的图表对象并管理您使用的索引单击然后为该索引调用 setDatasetVisibility 或 toggleDataVisibility

Chart.js 具有外部功能的数据集选项

Chart.js dataset options externally with functionality

javascript

graph

reactjs

chart.js