Highcharts自定义图例与折线交互功能实现问询

嘿，针对你提出的三个Highcharts需求，我整理了完整的可运行方案，每一步都有明确的代码和注释说明：

1. 自定义右侧图例 #

通过配置legend选项，直接将图例定位到图表右侧，还能自定义图例项的样式（比如字体、颜色）：

legend: {
  align: 'right', // 水平对齐到右侧
  verticalAlign: 'middle', // 垂直方向居中
  layout: 'vertical', // 图例项垂直排列
  itemStyle: {
    fontSize: '12px',
    color: '#333'
  }
}

2. 点击图例切换显示/隐藏，至少保留1条折线可见 #

利用plotOptions.series.events.legendItemClick事件，在点击图例时判断当前可见系列的数量：如果只剩1条可见，就阻止默认的隐藏操作；否则正常切换显示状态。

plotOptions: {
  series: {
    events: {
      legendItemClick: function () {
        // 统计当前所有可见的系列数量
        const visibleSeriesCount = this.chart.series.filter(s => s.visible).length;
        // 如果要隐藏的是最后一条可见系列，阻止操作
        if (visibleSeriesCount === 1) {
          return false;
        }
        // 否则允许切换显示/隐藏
        return true;
      }
    }
  }
}

3. 仅点击过的折线hover时显示tooltip #

初始禁用全局tooltip，给每个系列添加点击事件来标记“已选中”状态，再通过tooltip.formatter判断当前hover的系列是否被点击过，只有已点击的才显示tooltip：

tooltip: {
  enabled: false, // 初始全局禁用tooltip
  formatter: function () {
    // 仅当当前系列已被点击选中，才返回提示内容
    if (this.series.userOptions.isClicked) {
      return `<b>${this.series.name}</b><br/>X: ${this.x}<br/>Y: ${this.y}`;
    }
    return false; // 否则不显示tooltip
  }
},
series: [
  {
    name: '系列1',
    data: [1, 3, 2, 4, 5],
    isClicked: false, // 自定义属性标记是否被点击
    events: {
      click: function () {
        // 点击时切换选中状态
        this.update({ isClicked: !this.userOptions.isClicked });
      }
    }
  },
  // 其他系列配置同理...
]

完整可运行示例代码 #

Highcharts.chart('container', {
  title: {
    text: '自定义功能折线图'
  },
  xAxis: {
    categories: ['一月', '二月', '三月', '四月', '五月']
  },
  yAxis: {
    title: {
      text: '数值'
    }
  },
  // 1. 自定义右侧图例
  legend: {
    align: 'right',
    verticalAlign: 'middle',
    layout: 'vertical',
    itemStyle: {
      fontSize: '12px',
      color: '#333'
    }
  },
  // 2. 图例点击控制：至少保留1条可见
  plotOptions: {
    series: {
      events: {
        legendItemClick: function () {
          const visibleSeriesCount = this.chart.series.filter(s => s.visible).length;
          if (visibleSeriesCount === 1) {
            return false;
          }
          return true;
        }
      }
    }
  },
  // 3. 仅点击过的折线hover显示tooltip
  tooltip: {
    enabled: false,
    formatter: function () {
      if (this.series.userOptions.isClicked) {
        return `<b>${this.series.name}</b><br/>月份: ${this.x}<br/>数值: ${this.y}`;
      }
      return false;
    }
  },
  series: [
    {
      name: '销量A',
      data: [120, 150, 130, 180, 200],
      isClicked: false,
      events: {
        click: function () {
          this.update({ isClicked: !this.userOptions.isClicked });
        }
      }
    },
    {
      name: '销量B',
      data: [90, 110, 140, 160, 190],
      isClicked: false,
      events: {
        click: function () {
          this.update({ isClicked: !this.userOptions.isClicked });
        }
      }
    },
    {
      name: '销量C',
      data: [80, 100, 120, 150, 170],
      isClicked: false,
      events: {
        click: function () {
          this.update({ isClicked: !this.userOptions.isClicked });
        }
      }
    }
  ]
});

功能补充说明 #

• 图例默认在右侧垂直排列，样式可根据需求自行调整；
• 点击图例项时，如果当前只剩1条折线可见，无法继续隐藏该折线；
• 初始状态下hover任何折线都不会显示tooltip，只有点击过的折线，hover时才会弹出对应的数值提示框；再次点击折线可以取消选中状态，此时hover不再显示tooltip。

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