如何将highcharts插件添加到highcharts-vue（highcharts vue wrapper）中

Question

我正在使用highcharts的vue包装器highcharts-vue（ https://github.com/highcharts/highcharts-vue ）
我需要在图表上捕获鼠标右键单击（contextmenu）事件，以便安装highcharts自定义事件插件（ https://www.npmjs.com/package/highcharts-custom-events ），

我试图安装插件，按照官方文档这里是我的步骤

1.将../node_module/highcharts-vue/src/index.js中的代码更改为

import generateVueComponent from './component'
import Highcharts from 'highcharts'
import * as customEvent from 'highcharts-custom-events'

var hce = customEvent(Highcharts);
const Chart = generateVueComponent(hce)
export default function install(Vue, options = {}) {
  Vue.component(
    options.tagName || 'highcharts',
    generateVueComponent(options.highcharts || Highcharts)
  )
}
export { Chart }

2.使用“npm run build”重建highcharts-vue 3.使用插件教程之类的函数

 events: {
              click: () => {
                console.log("left click");
              },
              contextmenu: () => {
                console.log("right click");
              },

            }

但我没有发现任何事件。

有没有人知道如何安装插件“进入”highcharts的vue包装？

Answer 1

highcharts-custom-events是一个基本的Highcharts模块，因此您必须在组件中导入和初始化它，如下所示：

import HighchartsCustomEvents from "highcharts-custom-events";

HighchartsCustomEvents(Highcharts);

演示：

• https://codesandbox.io/s/vue-template-i7m7v