通过图例隐藏数据集时ChartJS隐藏Y轴

pepwfjgg  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(283)

当数据集通过图例关闭时,我试图隐藏相应的y-axis。我在一个图表上有3个数据集,它们都有自己的y-axis分配给它,下面是一个1/3的示例:

legend config中,我有以下代码:

  1. export const getChartLegendConfig = chart => {
  2. return {
  3. onClick: (click, legendItem, legend) => {
  4. //START handling legend click.
  5. const datasets = legend.legendItems.map((item, index) => {
  6. return item.text;
  7. });
  8. const index = datasets.indexOf(legendItem.text);
  9. if (legend.chart.isDatasetVisible(index) === true) {
  10. legend.chart.hide(index);
  11. } else {
  12. legend.chart.show(index);
  13. }
  14. //END handling legend click.
  15. //This is supposed to toggle y axis for a toggled dataset.
  16. // chart.scales[`y${index}`].display = false;
  17. chart.scales.y1.display = false;
  18. chart.scales.y2.display = false;
  19. console.log(chart);
  20. chart.update();
  21. }
  22. };
  23. };

此时我正尝试硬编码2个y轴(y1y2)以在图例单击时隐藏,但没有任何React,我做错了什么?chart.update()之前的console.log显示display值为false

vojdkbi0

vojdkbi01#

我认为您正在更改刻度对象,但您应该更改图表配置,因为您将调用图表的更新。
请参见文档:https://www.chartjs.org/docs/latest/developers/updates.html#updating-options

  1. chart.options.scales.y1.display = false;
  2. chart.options.scales.y2.display = false;
  3. chart.update();

相关问题