highcharts或highStock在react中使用highcharts-custom-events插件（右击出现一个菜单项！）...-优快云博客

本文介绍如何使用Highcharts及高阶定制事件插件实现图表上的右键菜单功能，并展示了如何通过点击菜单项来切换不同的图表类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、引入

import HighStock from 'highcharts-release/highstock.js'
import HighchartsCustomEvents from 'highcharts-custom-events'

HighchartsCustomEvents(HighStock) // 很重要，要不然图表上用不了

引用basiccontext（菜单的样式）

import basicContext from 'basiccontext'
import 'basiccontext/dist/basicContext.min.css'
import 'basiccontext/dist/themes/bright.min.css'
import 'basiccontext/dist/addons/popin.min.css'

2、具体实现

plotOptions: {
        line: {
          lineWidth: 1,
          dataGrouping: {
            enabled: false
          }
        },
        series: {
          animation: true,
          point: {
            events: {
              contextmenu: (e) => { // 右击显示菜单
                if (!this.props.showContextMenu) {
                  const contextMenu = [
                    {
                      title: '波形频谱图',
                      icon: 'fa fa-line-chart',
                      fn: () => {
                        that.showChart(e, 'spectrum')
                      }
                    },
                    {
                      title: '原始轴心轨迹图',
                      icon: 'fa fa-eercast',
                      fn: () => {
                        that.showChart(e, 'polarAxis')
                      }
                    },
                    {
                      title: '合成轴心轨迹图',
                      icon: 'fa fa-bullseye',
                      fn: () => {
                        that.showChart(e, 'polar')
                      }
                    },
                    {
                      title: '伯德图',
                      icon: 'fa fa-area-chart',
                      fn: () => {
                        that.showChart(e, 'bode')
                      }
                    }
                  ]

                  basicContext.show(contextMenu, e)
                }
              }
            }
          }
        }
      },