chart.js自定义分类X轴筛选器

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

我有一个关于过滤/子集化我的数据集的问题。我正在通过利用isDatasetVisiblesetDatasetVisibility创建一个自定义图例函数,但我想知道我的函数是否也可以子集化x轴?
现在的函数是这样的,但它的工作方式与默认图例行为类似

function updateLegend(click, output) {
    const element = click.target.parentNode;
    element.classList.toggle('fade');
    output.update();
}

function generateLegend(output, container) {
    if (document.querySelectorAll('.customLegend').length === 0) {
        const chartBox = document.querySelector(container);
        const div = document.createElement('DIV');
        div.setAttribute('class', 'customLegend');

        const ul = document.createElement('UL');

        output.legend.legendItems.forEach((dataset, index) => {
            const text = dataset.text;
            const stroke = dataset.strokeStyle;
            const fill = dataset.fillStyle;
            const fontColor = '#666';
            const dat = dataset.data;

            const li = document.createElement('LI');
            const spanBox = document.createElement('SPAN');
            spanBox.style.borderColor = stroke;

            if (fill == 'rgba(0,0,0,0.1)') {
                spanBox.setAttribute('class', 'legend-annotation');
            } else {
                spanBox.setAttribute('class', 'legend-content');
                spanBox.style.backgroundColor = fill;
            }

            const p = document.createElement('P');
            const textNode = document.createTextNode(text);

            li.onclick = (click) => {
                const isHidden = !output.isDatasetVisible(index);
                output.setDatasetVisibility(index, isHidden);
                updateLegend(click, output);
            };

            ul.appendChild(li);
            li.appendChild(spanBox);
            li.appendChild(p);
            p.appendChild(textNode);
        });

        chartBox.prepend(div);
        div.appendChild(ul);
    }
}

const customLegend = {
        id: 'customLegend',
        afterDraw(chart, args, options) {
            generateLegend(chart, '.chart-container');
        },
 };

我在下面创建了一个示例,在单击数据集2时,我不仅希望删除现在的条形,而且希望[A, B, C]占据整个x轴空间,因为[D,E,F]不再有可见数据......这是否需要创建自己的数据子集并触发重绘?任何建议都将非常有帮助!!
第一个

bihw5rsg

bihw5rsg1#

我通过在配置之外存储单独的数据集,并根据按钮点击切换配置指向的内容来解决这个问题。
我使用d3的汇总函数对数据进行分组,然后利用fade类来查看哪些数据集应该显示,哪些不应该显示!
第一个

相关问题