Highcharts堆叠柱状图：点击hover区域选中微小数据条

问题描述 #

我有一个Highcharts堆叠柱状图，已经实现了点击条形时弹出数值并改变颜色的功能，但遇到小数据条（比如高度极小的条形）无法点击的问题。希望能通过点击条形对应的hover区域来选中对应条形。

当前实现代码 #

JavaScript 代码 #

Highcharts.chart('container', {
  "chart": {
    "zoomType": "xy",
    "height": 320
  },
  "credits": {
    "enabled": false
  },
  "title": {
    "text": "",
    "align": "left",
    "style": {
      "fontFamily": "Poppins, Helvetica, \"sans-serif\"",
      "fontWeight": "600"
    }
  },
  "xAxis": {
    "title": {
      "text": ""
    },
    "categories": [
      "0.01-0.05",
      "0.06-0.10",
      "0.11-0.15",
      "0.16-0.20",
      "0.21-0.25",
      "0.26-0.30",
      "0.31-0.35",
      "0.36-0.40",
      "0.41-0.45",
      "0.46-0.50",
      "0.51-0.55",
      "0.56-0.60",
      "0.61-0.65",
      "0.66-0.70",
      "0.71-0.75",
      "0.76-0.80",
      "0.81-0.85",
      "0.86-0.90",
      "0.91-0.95",
      "0.96-1.00"
    ],
    "crosshair": true,
    "plotLines": [{
      "color": "#A9A9A9",
      "width": 3,
      "value": 9.5,
      "dashStyle": "longdashdot"
    }]
  },
  "yAxis": [{
      "title": {
        "text": "Count"
      },
      "min": 0
    },
    {
      "title": {
        "text": "y1 count"
      },
      "opposite": true,
      "min": 0
    }
  ],
  "tooltip": {
    "shared": true
  },
  plotOptions: {
    series: {
      stacking: 'normal',
      point: {
        events: {
          click() {
             var indexP = this.x,
            series = this.series.chart.series;

        if (series[0].data[indexP].selected) {
            // 取消选中
            series[0].data[indexP].select(false, true);
            series[1].data[indexP].select(false, true);

        } else {
            var i = 0;
            var len = series[1].data.length;
            for (i = 0; i < len; i++) { // 清除所有选中状态
                series[0].data[i].select(false, true);
                series[1].data[i].select(false, true);
                series[2].data[i].select(false, true);
            }
            // 选中当前分组
            series[0].data[indexP].select(true, true);
            series[1].data[indexP].select(true, true);
            series[2].data[indexP].select(true, true);
        }

        return false;
          }
        }
      }
    }
  },
  "legend": {
    "layout": "horizontal",
    "align": "right",
    "verticalAlign": "top"
  },
  "exporting": {
    "enabled": false
  },
  "series": [{
      "name": "y1",
      "type": "column",
      "stack": 1,
      "yAxis": 1,
      "color": "rgb(217, 141, 39)",
      "data": [
        1,
        13,
        24,
        25,
        34,
        74,
        104,
        66,
        104,
        121,
        111,
        89,
        87,
        97,
        93,
        92,
        100,
        147,
        250,
        567
      ],
      "tooltip": {
        "valueSuffix": " "
      }
    },
    {
      "name": "y3",
      "type": "column",
      "stack": 1,
      "yAxis": 1,
      "color": "rgb(44, 99, 143)",
      "data": [
        463,
        287,
        208,
        201,
        209,
        197,
        171,
        150,
        134,
        102,
        65,
        50,
        36,
        24,
        33,
        20,
        13,
        13,
        10,
        9
      ],
      "tooltip": {
        "valueSuffix": ""
      }
    },
    {
      "name": "y3",
      "type": "line",
      "color": "#F1416C",
      "data": [
        1,
        14,
        38,
        63,
        97,
        171,
        275,
        341,
        445,
        566,
        677,
        766,
        853,
        950,
        1043,
        1135,
        1235,
        1382,
        1632,
        2199
      ],
      "tooltip": {
        "valueSuffix": " "
      }
    }
  ]
})

HTML 代码 #

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>

解决方案 #

针对小数据条无法点击的问题，最直接的解决方式是给柱状图系列开启区域追踪（trackByArea），该属性会让点击对应x轴区域内的任意位置都触发点的点击事件，无需精准点击极小的条形。

修改plotOptions配置，将柱状图的trackByArea设为true：

plotOptions: {
  column: {
    stacking: 'normal',
    trackByArea: true, // 开启区域追踪，点击x轴对应区域即可触发点事件
    point: {
      events: {
        click() {
          var indexP = this.x,
          series = this.series.chart.series;

          if (series[0].data[indexP].selected) {
              // 取消选中
              series[0].data[indexP].select(false, true);
              series[1].data[indexP].select(false, true);

          } else {
              var i = 0;
              var len = series[1].data.length;
              for (i = 0; i < len; i++) { // 清除所有选中状态
                  series[0].data[i].select(false, true);
                  series[1].data[i].select(false, true);
                  series[2].data[i].select(false, true);
              }
              // 选中当前分组
              series[0].data[indexP].select(true, true);
              series[1].data[indexP].select(true, true);
              series[2].data[indexP].select(true, true);
          }

          return false;
        }
      }
    }
  },
  series: {
    // 折线图等其他系列的配置保持不变
  }
}

补充说明 #

• trackByArea是Highcharts柱状图（column）特有的属性，仅对柱状图系列生效。
• 开启后，鼠标悬停在x轴对应区域时也会触发tooltip，提升了小数据条的交互体验。
• 如果需要更灵活的控制，也可以监听图表的click事件，通过chart.pointer.normalize(event)获取点击位置对应的x轴索引，再执行选中逻辑。

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