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

如何将highcharts插件添加到highcharts-vue（highcharts vue包装器）

1 个答案: