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

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

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

legend config中,我有以下代码:

export const getChartLegendConfig = chart => {
    return {
        onClick: (click, legendItem, legend) => {
            //START handling legend click.
            const datasets = legend.legendItems.map((item, index) => {
                return item.text;
            });
            const index = datasets.indexOf(legendItem.text);

            if (legend.chart.isDatasetVisible(index) === true) {
                legend.chart.hide(index);
            } else {
                legend.chart.show(index);
            }
            //END handling legend click.

            //This is supposed to toggle y axis for a toggled dataset.
            // chart.scales[`y${index}`].display = false;
            chart.scales.y1.display = false;
            chart.scales.y2.display = false;
            console.log(chart);

            chart.update();
        }
    };
};

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

vojdkbi0

vojdkbi01#

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

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

相关问题