Highcharts 可访问性 / VUE.js

Question

我们有一个客户想要全屏阅读和键盘导航他们的网站（托管在 squarespace 上，我们为他们制作了一个 vue 插件）

我让他们网站的所有区域都可以工作，包括传单，但高图表我没有键盘导航的运气 html vue 中的行

    <highcharts
      :options="overTimeChartOptions"
      id="splineChat"
      style="display: block"
    ></highcharts>

在图表选项的 JS 部分使用它

  this.overTimeChartOptions = {
    accessibility: {
      keyboardNavigation: {
        enabled: true,
        focusBorder: {
          enabled: true,
          hideBrowserFocusOutline: true,
          margin: 2,
          style: {
            borderRadius: 3,
            color: "#335cad",
            lineWidth: 2,
          },
        },
      },
    },
    chart: {
      type: "areaspline",
      style: {
        fontFamily: "sans-serif",
        color: "#333333",
      },
    },
    title: {
      text: "",
      align: "left",
    },
    subtitle: {
      text: "",
      align: "left",
      style: {
        fontSize: "15px",
      },
    },
    legend: {
      layout: "horizontal",
      align: "center",
      verticalAlign: "bottom",
      fontweight: "bold",
      itemStyle: {
        fontWeight: "500",
        fontfontSize: "14px",
      },
      symbolRadius: 0,
      symbolHeight: 9,
    },
    xAxis: {
      categories: data.xxx.xxx,
    },
    yAxis: {
      title: {
        text: "xxxx",
      },
    },
    credits: {
      enabled: false,
    },
    plotOptions: {
      areaspline: {
        fillOpacity: 0,
        lineWidth: 5,
      },
    },
    series: [
      {
        name: "xxxxxx",
        data: data.xxx.xxx,
        color: "#0070c0",
      },
     ,
    ],
  };

为很好的措施添加了带有 highcharts 的 accessibiliy 模块的脚本行

 head() {
   return {
    script: {
    src: "https://code.highcharts.com/modules/accessibility.js",
    },
  };
},

一旦我们进入屏幕，虽然标签和箭头在图表部分完全弹跳

添加如下主js文件

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import VueHighcharts from "vue-highcharts";
import Highcharts from "highcharts/highmaps";
import HighchartsVue from "highcharts-vue";

<script src="https://code.highcharts.com/modules/accessibility.js"> 
</script>;

Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");

Vue.use(VueHighcharts, { Highcharts });

Vue.use(HighchartsVue);

Highcharts.setOptions({
accessibility: {
keyboardNavigation: {
  enabled: true,
},
},
});

Answer 1

尝试在 Chart.vue 组件中加载辅助功能模块，如导入。

有关如何设置 Vue 和 Highcharts 的更多信息，您可以在我们的包装器中找到 https://github.com/highcharts/highcharts-vue#using

import accessibility from "highcharts/modules/accessibility";

现场演示：https://codesandbox.io/s/highcharts-vue-demo-forked-hmv3h

Highcharts 可访问性 / VUE.js

Highcharts accessibility / VUE.js

vue.js

highcharts

vue-component

accessibility