React Highchart：如何将“accessibility.enabled”选项设置为 false

Question

我在控制台中有这个错误：

Highcharts warning: Consider including the "accessibility.js" module to make your chart more usable for people with disabilities. Set the "accessibility.enabled" option to false to remove this warning. See https://www.highcharts.com/docs/accessibility/accessibility-module.

在文档中找不到Set the "accessibility.enabled" option to false位置。

这是我传递给组件的选项：

const optionNUsersPerService = {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Utenti per servizio'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        accessibility: {
            point: {
                valueSuffix: '%'
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            name: 'Utenti',
            colorByPoint: true,
            data: getDataUsersPerService(props.items)
        }]
    }

这是组件：

return (
        <HighchartsReact
            highcharts={Highcharts}
            options={currentOptions}
            immutable={true}
            callback={props.callback}
        />
    );

Answer 1

自 Highcharts v10.1.0 (2022-04-29) 起添加警告

更新日志： https://www.highcharts.com/blog/changelog/

要禁用辅助功能，请设置：

  accessibility: {
    enabled: false
  }

---

现场演示： http://jsfiddle.net/BlackLabel/mvnjskqr/

API 参考： https://api.highcharts.com/highcharts/accessibility.enabled

Answer 2

我不建议您禁用图表的可访问性，这将使依赖键盘和语音软件（如 NVDA、JAWS、VoiceOver 等）的残障用户无法访问它们。

消除此警告的另一种方法是简单地导入辅助功能模块。

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import { useEffect, useState } from "react";

require("highcharts/modules/accessibility")(Highcharts);

参考： https://github.com/highcharts/highcharts-react#how-to-add-a-module

参考： https://github.com/highcharts/highcharts-react/issues/141