如何在Highcharts React中禁用指定系列的图例点击隐藏功能

针对你遇到的问题，以下是两种可靠的解决方法，结合你的现有代码调整即可生效：

方法1：强化系列级legendItemClick事件 #

在'Series in Rs'系列的配置中，不仅阻止默认点击行为，还强制锁定系列可见状态，避免任何意外隐藏：

{
  name: "Series in Rs",
  data: chartData[0]?.data || [],
  yAxis: 0,
  visible: true,
  events: {
    legendItemClick: function (event) {
      event.preventDefault();
      // 强制保持系列可见，覆盖所有可能的状态变更
      this.setVisible(true, false);
      return false;
    },
  },
  // 可选：设置图例样式，让用户直观感知不可点击
  legendItem: {
    style: {
      cursor: "default",
      pointerEvents: "none"
    }
  }
}

方法2：全局图例点击拦截 #

如果系列级事件未生效，可通过全局legend.itemClick事件统一处理，精准拦截目标系列的点击操作：

在options中添加legend配置：

const options = {
  // ... 其他原有配置
  legend: {
    itemClick: function(event) {
      if (event.target.name === "Series in Rs") {
        event.preventDefault();
        return false;
      }
    }
  },
  // ... 系列配置
}

关键注意事项 #

1. 确保每次组件渲染时，'Series in Rs'的visible属性始终设为true（你的代码已满足此要求）。
2. React组件因状态更新（如showPaisa变化）重新渲染时，HighchartsReact会自动同步配置，上述事件会被重新绑定，无需额外处理。
3. 添加pointerEvents: "none"和cursor: "default"能优化交互体验，让用户一眼识别该图例不可点击。

调整后的完整代码示例：

import React, { useEffect, useState } from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import drilldown from "highcharts/modules/drilldown";

drilldown(Highcharts);

const BarGraph = ({ graphData, dates }) => {
  const [chartData, setChartData] = useState([]);
  const [showPaisa, setShowPaisa] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (
      Array.isArray(graphData) &&
      graphData.length > 0
    ) {
      const processedData = graphData.map((item, index) => ({
        name: item.name,
        data: item.data || [],
        yAxis: item.yAxis,
        visible: true,
      }));

      setChartData(processedData);
      setLoading(false);
    }
  }, [graphData]);

  const options = {
    chart: {
      type: "column",
    },
    title: {
      text: "",
    },
    xAxis: {
      categories: dates || [],
    },
    yAxis: [
      {
        title: {
          text: "Series in Rs",
        },
        opposite: false,
        labels: {
          formatter: function () {
            return this.value;
          },
        },
      },
      {
        title: {
          text: `Series in   ${showPaisa ? " (p)" : " (%)"}`,
        },
        opposite: true,
        labels: {
          formatter: function () {
            return `${this.value} ${showPaisa ? "p" : "%"}`;
          },
        },
      },
    ],
    // 全局图例点击拦截
    legend: {
      itemClick: function(event) {
        if (event.target.name === "Series in Rs") {
          event.preventDefault();
          return false;
        }
      }
    },
    series: [
      {
        name: "Series in Rs",
        data: chartData[0]?.data || [],
        yAxis: 0,
        visible: true,
        events: {
          legendItemClick: function (event) {
            event.preventDefault();
            this.setVisible(true, false);
            return false;
          },
        },
        // 图例不可点击样式
        legendItem: {
          style: {
            cursor: "default",
            pointerEvents: "none"
          }
        }
      },
      {
        name: "Series in p",
        data: chartData[1]?.data || [],
        yAxis: 1,
        events: {
          legendItemClick: function (e) {
            setShowPaisa(!showPaisa);
          },
        },
        visible: !showPaisa,
      },
      {
        name: "Series in %",
        data: chartData[2]?.data || [],
        yAxis: 1,
        events: {
          legendItemClick: function () {
            setShowPaisa(!showPaisa);
          },
        },
        visible: showPaisa,
      },
    ],
  };

  if (loading) {
    return <div>Loading...</div>;
  }

  return <HighchartsReact highcharts={Highcharts} options={options} />;
};

export default BarGraph;

内容的提问来源于stack exchange，提问作者Ayush