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

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

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

  1. function updateLegend(click, output) {
  2. const element = click.target.parentNode;
  3. element.classList.toggle('fade');
  4. output.update();
  5. }
  6. function generateLegend(output, container) {
  7. if (document.querySelectorAll('.customLegend').length === 0) {
  8. const chartBox = document.querySelector(container);
  9. const div = document.createElement('DIV');
  10. div.setAttribute('class', 'customLegend');
  11. const ul = document.createElement('UL');
  12. output.legend.legendItems.forEach((dataset, index) => {
  13. const text = dataset.text;
  14. const stroke = dataset.strokeStyle;
  15. const fill = dataset.fillStyle;
  16. const fontColor = '#666';
  17. const dat = dataset.data;
  18. const li = document.createElement('LI');
  19. const spanBox = document.createElement('SPAN');
  20. spanBox.style.borderColor = stroke;
  21. if (fill == 'rgba(0,0,0,0.1)') {
  22. spanBox.setAttribute('class', 'legend-annotation');
  23. } else {
  24. spanBox.setAttribute('class', 'legend-content');
  25. spanBox.style.backgroundColor = fill;
  26. }
  27. const p = document.createElement('P');
  28. const textNode = document.createTextNode(text);
  29. li.onclick = (click) => {
  30. const isHidden = !output.isDatasetVisible(index);
  31. output.setDatasetVisibility(index, isHidden);
  32. updateLegend(click, output);
  33. };
  34. ul.appendChild(li);
  35. li.appendChild(spanBox);
  36. li.appendChild(p);
  37. p.appendChild(textNode);
  38. });
  39. chartBox.prepend(div);
  40. div.appendChild(ul);
  41. }
  42. }
  43. const customLegend = {
  44. id: 'customLegend',
  45. afterDraw(chart, args, options) {
  46. generateLegend(chart, '.chart-container');
  47. },
  48. };

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

bihw5rsg

bihw5rsg1#

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

相关问题