Chart.js -使用箭头键在元素/工具提示之间导航

ldioqlga  于 2023-03-12  发布在  Chart.js
关注(0)|答案(1)|浏览(238)

这可能是Chart.js缺少的更有用(也是简单)的特性之一。如果你没有多个标签/数据集,我的代码大部分应该已经工作了,这也是我试图弄清楚的。我们只需要解决最后几个细节,我们就有了一个很棒的新特性。
对于上下文,我使用的是折线图,我使用的是Chart.js的3.5.1版本,但这也适用于最新版本(截至2023年2月的4.2.1)
我们可以使用myChart.getActiveElements();来获取当前选中的元素。
例如,我们可以使用它以编程方式显示工具提示... myChart.tooltip.setActiveElements([{ datasetIndex: 1, index: 1 }]);myChart.update();
所以在图表中导航应该不是那么困难。
这是我正在修改的代码。

  1. const myChart = Chart.getChart("myChart"); // make sure to replace the "myChart"
  2. var active_element;
  3. document.addEventListener('keydown', event => {
  4. active_element = myChart.getActiveElements();
  5. if ( ! active_element.length ) {
  6. myChart.setActiveElements([{ datasetIndex: 0, index: 0 }]);
  7. myChart.tooltip.setActiveElements([{ datasetIndex: 0, index: 0 }]);
  8. myChart.update();
  9. active_element = myChart.getActiveElements();
  10. }
  11. const active = active_element[0];
  12. const dataset = myChart.data.datasets[active.datasetIndex];
  13. const data = dataset.data;
  14. let index = active.index;
  15. if ( event.code === 'ArrowLeft' ) {
  16. index = index > 0 ? index - 1 : data.length - 1;
  17. } else if ( event.code === 'ArrowRight' ) {
  18. index = index < data.length - 1 ? index + 1 : 0;
  19. }
  20. console.log('active', active.datasetIndex);
  21. console.log('index ', index);
  22. myChart.setActiveElements([{ datasetIndex: active.datasetIndex, index }]);
  23. myChart.tooltip.setActiveElements([{ datasetIndex: active.datasetIndex, index }]);
  24. myChart.update();
  25. });

我遇到的主要问题是每个x轴点有多个标签(多个数据集)。

我们需要克服的另一个障碍是,当您将鼠标放在图表上时,您将始终拥有相同的活动chartElement...目前,将鼠标放在图表上会阻止它工作。因此,我们不允许这样做,而是简单地从一开始就触发第0个元素,存储值,并在将来更新时使用该值。目前这很好,但最终应该得到解决。
这是一个非常基本的无障碍功能,我想我们都很惊讶它在默认情况下是不可用的。人们至少从2016年就开始要求它了,你可以在这里看到:https://github.com/chartjs/Chart.js/issues/1976
我就快找到一个可行的解决方案了,这段代码可以在任何折线图上运行,你只需要编辑第一行代码const myChart = Chart.getChart("your_chart_here");
我们开始吧!!

roejwanj

roejwanj1#

我编写了一个库Chart2Music,它可以帮助只使用键盘和屏幕阅读器的用户提供键盘导航和发音。
因为我喜欢使用chart.js,所以我也为它构建了一个chart.js插件,叫做chartjs-plugin-chart2music,目前还在测试阶段。
您可以通过注册插件来获得可访问性支持。

  1. import Chart from "chart.js/auto";
  2. import chartjs2music from "chartjs-plugin-chart2music";
  3. // Register the plugin globally
  4. Chart.register(chartjs2music);

如果你想玩一下,这里有一个codepen的例子,里面有键盘导航和发音:https://codepen.io/chart2music/full/YzaVxPK

相关问题