通过chart.js中图例的一次单击事件隐藏或显示两个数据集

ccgok5k5 于 2022-11-07 发布在 Chart.js

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

我想显示30天内两个班次的机器停机时间的可视化-白天（12小时）和晚上（12小时）。因此，我使用了组堆叠条形图，它看起来很好，接受我不想用图例显示两个班次（白天和晚上）。
stacked bar chart with groups

<canvas id="myChart"></canvas>

<script>

    var ctx = document.getElementById("myChart").getContext('2d');

    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30",],
            datasets: [{
                label: 'Machine 1 - Day',
                stack: 'Stack 0',
                data: [5, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
                backgroundColor: '#FF4A4A',
            },
            {
                label: 'Machine 1 - Night',
                stack: 'Stack 1',
                data: [5, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
                backgroundColor: '#FF4A4A',
            },
            {
                label: 'Machine 2 - Day',
                stack: 'Stack 0',
                data: [5, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
                backgroundColor: '#FF9C2A',
            },
            {
                label: 'Machine 2 - Night',
                stack: 'Stack 1',
                data: [12, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
                backgroundColor: '#FF9C2A',
            },

            ]
        },
        options: {
            plugins: {
                legend: {
                    display: true
                }
            },
            scales: {
                xAxes: [{
                    stacked: true,
                }],
                yAxes: [{
                    stacked: true
                }]
            }
        }
    });

</script>

如何在图例中将机器1或2组合为白班和夜班，单击机器1或2将隐藏两个班次（白班和夜班）
stacked bar chart with groups edit Legend
我发现下面的方法可能对我有用。https://www.chartjs.org/docs/3.1.0/configuration/legend.html#custom-on-click-actions
click handler of the first two datasets
如何处理单击处理程序的后两个数据集，依此类推。

<canvas id="myChart"></canvas>

<script>

    var defaultLegendClickHandler = Chart.defaults.plugins.legend.onClick;
    var newLegendClickHandler = function (e, legendItem, legend) {
        var index = legendItem.datasetIndex;

        if (index > 1) {
            // Do the original logic
            defaultLegendClickHandler(e, legendItem);
        } else {
            let ci = legend.chart;
            [
                ci.getDatasetMeta(0),
                ci.getDatasetMeta(1)
            ].forEach(function (meta) {
                meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
            });
            ci.update();
        }
    };

    var ctx = document.getElementById("myChart").getContext('2d');

    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30",],
            datasets: [{
                label: 'Machine 1 - Day',
                stack: 'Stack 0',
                data: [5, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
                backgroundColor: '#FF4A4A',
            },
            {
                label: 'Machine 1 - Night',
                stack: 'Stack 1',
                data: [5, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
                backgroundColor: '#FF4A4A',
            },
            {
                label: 'Machine 2 - Day',
                stack: 'Stack 0',
                data: [5, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
                backgroundColor: '#FF9C2A',
            },
            {
                label: 'Machine 2 - Night',
                stack: 'Stack 1',
                data: [12, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
                backgroundColor: '#FF9C2A',
            },

            ]
        },
        options: {
            plugins: {
                legend: {
                    onClick: newLegendClickHandler
                }
            },
            scales: {
                xAxes: [{
                    stacked: true,
                }],
                yAxes: [{
                    stacked: true
                }]
            }
        }
    });

</script>

chart.js

来源：https://stackoverflow.com/questions/70582403/hide-or-show-two-datasets-with-one-click-event-of-legend-in-chart-js

2条答案

按热度按时间

bmvo0sr51#

首先，您需要定义一个legend.labels.generateLabels函数，该函数可以过滤掉不需要的图例标签并更改剩余图例标签的文本。

generateLabels: chart => chart.data.datasets.map((ds, i) => ({
    text: ds.label.substring(0, ds.label.indexOf('-')),
    datasetIndex: i,
    fillStyle: chart.data.datasets[i].backgroundColor,
    strokeStyle: chart.data.datasets[i].backgroundColor,
    hidden: chart.getDatasetMeta(i).hidden
  }))
  .filter((ds, i) => i % 2),

然后，您必须定义一个legend.onClick函数，该函数还负责在用户单击图例标签时显示/隐藏同级数据集。

onClick: (event, legendItem, legend) => {
  let hidden = !legend.chart.getDatasetMeta(legendItem.datasetIndex).hidden;
  (legendItem.datasetIndex == 1 ? [0, 1] : [2, 3])
  .forEach(i => legend.chart.getDatasetMeta(i).hidden = hidden);
  legend.chart.update();
}

有关详细信息，请参阅Chart.js文档的Legend和API章节。
请查看修改后的代码并了解其工作原理。
第一个

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

7hiiyaii2#

嘿，我得到了类似这样的工作，但我隐藏了所有与相同的堆栈变量，并隐藏某些数据系列，以及，这样我就可以隐藏他们没有他们的图例项目可供点击：
我有很多系列具有相同的数据集（即，失败的数字，重新测试的数字，不想显示这些标签）

// Get Data From Views and Add Custom onClick Listener
let tempData = { ...views[i].data };
if (
// Kill the onClick and add a much slower but grouping onClick, hide all with part number in stack
    tempData &&
    tempData.options &&
    tempData.options.plugins &&
    tempData.options.plugins.legend
)
    tempData.options.plugins.legend.onClick = (e, legendItem) => {
        // My labels always start with the part number and a space so I grab that.
        const partName = legendItem.text.split(' ')[0];
        const chart = Chart.getChart('temp-chart');

        // Toggle the data set that was clicked on
        const datasetIndex = legendItem.datasetIndex;
        if (!chart.getDatasetMeta(datasetIndex).hidden) chart.hide(datasetIndex);
        else chart.show(datasetIndex);

        let j = 0;
        // Iterate through all datasets, cap at 200 for safety
        while (chart.getDatasetMeta(j).stack && j < 200) {
            const datasetMeta = chart.getDatasetMeta(j);
            const stack = datasetMeta.stack;
            const datasetName = datasetMeta.label;

            // I add a stack id to all my datasets and use that to determine what is 'grouped'
            // I have a plugin that does not render any datasets which do not have a label
            // If the stack group matches and the dataset does not have a label it will be hidden.
            if (
                stack === partName &&
                (datasetName == null ||
                    datasetName === '' ||
                    datasetName === 'undefined')
            ) {
                if (!chart.getDatasetMeta(j).hidden) chart.hide(j);
                else chart.show(j);
            }
            j++;
        }
    };
new Chart('temp-chart', { ...tempData });

和图例插件来隐藏没有标签的图例项。

Chart.defaults.plugins.legend.labels.filter = (item) => {
    return item.text != null;
};

Heres what I got - Pictures

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

我来回答

通过chart.js中图例的一次单击事件隐藏或显示两个数据集

2条答案

相关问题

热门标签

最新问答