修改ZingChart图例行为：点击图例高亮系列而非切换显示

没问题，这个需求特别贴合移动端的适配场景！我们可以通过监听legend_item_click事件，先阻止它默认的系列隐藏/显示行为，再手动触发高亮效果，就能实现点击和悬停统一触发高亮的目标。

完整示例代码 #

// 定义图表基础配置
const chartConfig = {
  type: "line",
  title: { text: "移动端适配折线图" },
  legend: {
    align: "center",
    verticalAlign: "bottom"
  },
  series: [
    { values: [28, 45, 37, 62, 51, 73, 65, 81] },
    { values: [19, 32, 25, 47, 39, 58, 50, 67] },
    { values: [12, 24, 18, 35, 27, 42, 36, 50] }
  ],
  events: {
    // 监听图例项点击事件
    legend_item_click: function(e) {
      // 1. 阻止默认的"点击隐藏/显示系列"行为
      e.preventDefault();
      
      // 2. 获取当前点击的系列索引
      const targetSeriesId = e.seriesIndex;
      
      // 3. 触发系列高亮（完全模拟悬停时的视觉效果）
      zingchart.exec("mobileLineChart", "highlight", {
        object: "series",
        id: targetSeriesId,
        // 可选：自定义高亮样式，和默认悬停保持一致
        style: {
          lineWidth: 4,
          marker: { size: 9 }
        }
      });

      // 可选：如果需要"点击切换高亮"（仅保留当前系列高亮），取消下面的注释
      // for (let i = 0; i < chartConfig.series.length; i++) {
      //   if (i !== targetSeriesId) {
      //     zingchart.exec("mobileLineChart", "highlight", {
      //       object: "series",
      //       id: i,
      //       state: "off"
      //     });
      //   }
      // }
    }
  }
};

// 渲染图表
zingchart.render({
  id: "mobileLineChart",
  data: chartConfig,
  height: "100%",
  width: "100%"
});

关键逻辑说明 #

• e.preventDefault()：这是核心步骤，它会中断ZingChart内置的图例点击行为，避免系列被隐藏/显示，让我们能完全自定义操作。
• zingchart.exec(...)调用highlight命令：通过ZingChart的执行方法，主动触发指定系列的高亮效果，还可以通过style参数自定义高亮时的线条粗细、标记点大小，保证和默认悬停效果一致。
• 可选的单系列高亮控制：如果希望每次点击只高亮当前选中的系列，取消其他系列的高亮状态，可以启用注释里的循环代码，遍历所有系列并关闭非目标系列的高亮。

这样修改后，不管是桌面端的悬停操作，还是移动端的点击操作，都会触发系列高亮效果，完美适配你的需求！

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