React Highcharts柱状图：实现下钻与自定义超链接跳转功能

一、React Highcharts 改造方案 #

直接在你现有代码基础上修改，通过给数据绑定自定义URL、监听点击事件实现跳转：

1. 给数据点添加自定义URL字段 #

把原来的数组格式数据改成对象，给每个点绑定对应的跳转链接，上层系列和钻取子系列都要加：

const chartConfig = {
  // ...其他配置
  series: [{
    name: 'Things',
    colorByPoint: true,
    data: [
      { name: 'Animals', y: 5, drilldown: 'animals', url: '你的动物分类链接' },
      { name: 'Fruits', y: 2, drilldown: 'fruits', url: '你的水果分类链接' },
      { name: 'Cars', y: 4, drilldown: 'cars', url: '你的汽车分类链接' }
    ]
  }],
  drilldown: {
    series: [{
      id: 'animals',
      data: [
        { name: 'Cats', y: 4, url: '你的猫咪详情链接' },
        { name: 'Dogs', y: 2, url: '你的狗狗详情链接' },
        { name: 'Cows', y: 1, url: '你的奶牛详情链接' },
        { name: 'Sheep', y: 2, url: '你的绵羊详情链接' },
        { name: 'Pigs', y: 1, url: '你的小猪详情链接' }
      ]
    },
    // 其他子系列同理...
    ]
  }
};

2. 配置点击事件 #

在图表配置里添加柱子和X轴文本的点击回调：

const chartConfig = {
  chart: {
    type: 'column',
    events: {
      // 处理柱子点击
      click: function(e) {
        const point = e.point;
        if (point?.url) {
          // 新窗口打开或直接跳转二选一
          window.open(point.url, '_blank');
          // window.location.href = point.url;
        }
      }
    }
  },
  xAxis: {
    type: 'category',
    events: {
      // 处理X轴文本点击
      click: function(e) {
        const category = e.category;
        const currentSeries = this.chart.series[0];
        const targetPoint = currentSeries.data.find(p => p.name === category);
        if (targetPoint?.url) {
          window.open(targetPoint.url, '_blank');
        }
      }
    }
  },
  // ...之前的series和drilldown配置
};

注意事项 #

• 钻取后X轴点击逻辑会自动适配当前显示的系列，不需要额外处理
• 若不需要新窗口打开，替换window.open为window.location.href即可

二、备选方案：使用ECharts（React版本） #

如果React Highcharts的改造不符合预期，ECharts的事件处理更简洁，同样支持钻取和自定义跳转：

import ReactECharts from 'echarts-for-react';

const chartOption = {
  tooltip: { trigger: 'item' },
  series: [{
    name: 'Things',
    type: 'bar',
    data: [
      { name: 'Animals', value: 5, drilldown: 'animals', url: '你的动物分类链接' },
      { name: 'Fruits', value: 2, drilldown: 'fruits', url: '你的水果分类链接' },
      { name: 'Cars', value: 4, drilldown: 'cars', url: '你的汽车分类链接' }
    ]
  }],
  drilldown: {
    series: [{
      id: 'animals',
      type: 'bar',
      data: [
        { name: 'Cats', value: 4, url: '你的猫咪详情链接' },
        { name: 'Dogs', value: 2, url: '你的狗狗详情链接' },
        // 其他子项同理...
      ]
    },
    // 其他子系列配置...
    ]
  }
};

function DrilldownBarChart() {
  const handleChartClick = (params) => {
    if (params.data?.url) {
      window.open(params.data.url, '_blank');
    }
  };

  return (
    <ReactECharts
      option={chartOption}
      onEvents={{ click: handleChartClick }}
    />
  );
}

ECharts的优势在于：点击柱子或X轴文本都会触发同一个click事件，直接从params.data中取URL即可，无需分开处理轴和柱子的逻辑，钻取状态也自动适配。

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