高级图表可访问性/ VUE.js

Question

我们有一个客户端希望为他们的站点提供全屏阅读和keybaord导航(托管在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",
      },
     ,
    ],
  };

为了更好地测量，添加了高级图表的辅助程序模块的脚本行

 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和高级图表的信息，您可以在我们的包装器https://github.com/highcharts/highcharts-vue#using中找到

import accessibility from "highcharts/modules/accessibility";

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