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

ccgok5k5  于 2022-11-07  发布在  Chart.js
关注(0)|答案(2)|浏览(224)

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

  1. <canvas id="myChart"></canvas>
  3. <script>
  5.     var ctx = document.getElementById("myChart").getContext('2d');
  7.     var myChart = new Chart(ctx, {
  8.         type: 'bar',
  9.         data: {
  10.             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",],
  11.             datasets: [{
  12.                 label: 'Machine 1 - Day',
  13.                 stack: 'Stack 0',
  14.                 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],
  15.                 backgroundColor: '#FF4A4A',
  16.             },
  17.             {
  18.                 label: 'Machine 1 - Night',
  19.                 stack: 'Stack 1',
  20.                 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],
  21.                 backgroundColor: '#FF4A4A',
  22.             },
  23.             {
  24.                 label: 'Machine 2 - Day',
  25.                 stack: 'Stack 0',
  26.                 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],
  27.                 backgroundColor: '#FF9C2A',
  28.             },
  29.             {
  30.                 label: 'Machine 2 - Night',
  31.                 stack: 'Stack 1',
  32.                 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],
  33.                 backgroundColor: '#FF9C2A',
  34.             },
  36.             ]
  37.         },
  38.         options: {
  39.             plugins: {
  40.                 legend: {
  41.                     display: true
  42.                 }
  43.             },
  44.             scales: {
  45.                 xAxes: [{
  46.                     stacked: true,
  47.                 }],
  48.                 yAxes: [{
  49.                     stacked: true
  50.                 }]
  51.             }
  52.         }
  53.     });
  55. </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
如何处理单击处理程序的后两个数据集，依此类推。

  1. <canvas id="myChart"></canvas>
  3. <script>
  5.     var defaultLegendClickHandler = Chart.defaults.plugins.legend.onClick;
  6.     var newLegendClickHandler = function (e, legendItem, legend) {
  7.         var index = legendItem.datasetIndex;
  9.         if (index > 1) {
  10.             // Do the original logic
  11.             defaultLegendClickHandler(e, legendItem);
  12.         } else {
  13.             let ci = legend.chart;
  14.             [
  15.                 ci.getDatasetMeta(0),
  16.                 ci.getDatasetMeta(1)
  17.             ].forEach(function (meta) {
  18.                 meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
  19.             });
  20.             ci.update();
  21.         }
  22.     };
  24.     var ctx = document.getElementById("myChart").getContext('2d');
  26.     var myChart = new Chart(ctx, {
  27.         type: 'bar',
  28.         data: {
  29.             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",],
  30.             datasets: [{
  31.                 label: 'Machine 1 - Day',
  32.                 stack: 'Stack 0',
  33.                 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],
  34.                 backgroundColor: '#FF4A4A',
  35.             },
  36.             {
  37.                 label: 'Machine 1 - Night',
  38.                 stack: 'Stack 1',
  39.                 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],
  40.                 backgroundColor: '#FF4A4A',
  41.             },
  42.             {
  43.                 label: 'Machine 2 - Day',
  44.                 stack: 'Stack 0',
  45.                 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],
  46.                 backgroundColor: '#FF9C2A',
  47.             },
  48.             {
  49.                 label: 'Machine 2 - Night',
  50.                 stack: 'Stack 1',
  51.                 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],
  52.                 backgroundColor: '#FF9C2A',
  53.             },
  55.             ]
  56.         },
  57.         options: {
  58.             plugins: {
  59.                 legend: {
  60.                     onClick: newLegendClickHandler
  61.                 }
  62.             },
  63.             scales: {
  64.                 xAxes: [{
  65.                     stacked: true,
  66.                 }],
  67.                 yAxes: [{
  68.                     stacked: true
  69.                 }]
  70.             }
  71.         }
  72.     });
  74. </script>
chart.js

2条答案

按热度按时间
bmvo0sr5

bmvo0sr51#

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

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

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

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

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

展开查看全部
赞(0）分享  回复(0）举报  2022-11-07
7hiiyaii

7hiiyaii2#

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

  1. // Get Data From Views and Add Custom onClick Listener
  2. let tempData = { ...views[i].data };
  3. if (
  4. // Kill the onClick and add a much slower but grouping onClick, hide all with part number in stack
  5.     tempData &&
  6.     tempData.options &&
  7.     tempData.options.plugins &&
  8.     tempData.options.plugins.legend
  9. )
  10.     tempData.options.plugins.legend.onClick = (e, legendItem) => {
  11.         // My labels always start with the part number and a space so I grab that.
  12.         const partName = legendItem.text.split(' ')[0];
  13.         const chart = Chart.getChart('temp-chart');
  15.         // Toggle the data set that was clicked on
  16.         const datasetIndex = legendItem.datasetIndex;
  17.         if (!chart.getDatasetMeta(datasetIndex).hidden) chart.hide(datasetIndex);
  18.         else chart.show(datasetIndex);
  20.         let j = 0;
  21.         // Iterate through all datasets, cap at 200 for safety
  22.         while (chart.getDatasetMeta(j).stack && j < 200) {
  23.             const datasetMeta = chart.getDatasetMeta(j);
  24.             const stack = datasetMeta.stack;
  25.             const datasetName = datasetMeta.label;
  27.             // I add a stack id to all my datasets and use that to determine what is 'grouped'
  28.             // I have a plugin that does not render any datasets which do not have a label
  29.             // If the stack group matches and the dataset does not have a label it will be hidden.
  30.             if (
  31.                 stack === partName &&
  32.                 (datasetName == null ||
  33.                     datasetName === '' ||
  34.                     datasetName === 'undefined')
  35.             ) {
  36.                 if (!chart.getDatasetMeta(j).hidden) chart.hide(j);
  37.                 else chart.show(j);
  38.             }
  39.             j++;
  40.         }
  41.     };
  42. new Chart('temp-chart', { ...tempData });

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

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

Heres what I got - Pictures

展开查看全部
赞(0）分享  回复(0）举报  2022-11-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com