禁用hightcharts中的事件

disabling events in hightcharts js

本文关键字:事件 hightcharts 禁用      更新时间:2023-09-26

我需要禁用高图表堆叠面积图中图例上的事件。下面是我的代码:

chart: {
      type: 'area',
    },
    point: {
      events: {
        legendItemClick: function () {
          return false; // <== returning false will cancel the default action
        },
      },
    },
    title: {
      text: title,
    },
    xAxis: {
      type: 'datetime',
      min: startDateInMS,
      max: endDateInMS,
    },
    yAxis: {
      title: {
        text: yLabel,
      },
    },
    series: data,
    plotOptions: {
      series: {
        stacking: 'normal',
      },
    },
    credits: {
      enabled: false,
    },
  };

这似乎ok根据文档,但你仍然可以点击在图例中删除项目从图表,我不想要的。任何帮助都是可爱的!!

您的问题来自于您将单击事件分配给点的事实,但从它的外观来看,您的图表是area,并且您将单击事件应用于错误的属性。

你把它放在lines下,同时,它需要嵌套成- plotOptions -> area -> events -> legendItemClick

相反,请确保您的事件嵌套如下:
chart: {
      type: 'area',
    },
    plotOptions: {
      area: {
        events: {
          legendItemClick: function () {
            return false; // <== returning false will cancel the default action
          }
        }
      }
    },
    title: {
      text: title,
    },
    xAxis: {
      type: 'datetime',
      min: startDateInMS,
      max: endDateInMS,
    },
    yAxis: {
      title: {
        text: yLabel,
      },
    },
    series: data,
    plotOptions: {
      series: {
        stacking: 'normal',
      },
    },
    credits: {
      enabled: false,
    },
};

明白了…我有另一个情节选项,进一步停机代码,在编写以下代码:

chart: {
      type: 'area',
    },
    plotOptions: {
      series: {
        stacking: 'normal',
      },
      area: {
        events: {
          legendItemClick: function () {
            return false; // <== returning false will cancel the default action
          },
        },
      },
    },
    title: {
      text: title,
    },
    xAxis: {
      type: 'datetime',
      min: startDateInMS,
      max: endDateInMS,
    },
    yAxis: {
      title: {
        text: yLabel,
      },
    },
    series: data,
    credits: {
      enabled: false,
    },
  };
谢谢你的帮助!