在 Highcharts 中突出显示 x 轴标签

Question

我在 Highcharts 中有一个条形图，我需要根据触发的事件突出显示其中一个条形图的 x 轴标签。请注意，此事件不是 Highcharts 图表内的 click，而是从外部触发的事件。

到目前为止，一旦我订阅的事件被触发，我已经通过执行类似的操作获得了点击的条形图的索引

 var index = <HighchartsPointObject>this.chart.get('some very unique identifier').category;

但我还没有找到一种方法来实际手动突出显示相应索引处的标签（如更改 CSS 颜色样式）。

请注意，我还尝试以类似于此的方式在 options 对象中使用 formatter()：

formatter(this: { value: string }) {
    var someStaticReference = storedValueFromFiredEvent // get the information I need from that event
        if (someStaticReference.name === this.value) {
            return '<span style="color:#0095d3;">' + this.value + '</span>';
           } else {
               return this.value
           }
}

但这对我也不起作用，因为不同的条可能具有相同的名称。所以我需要一些基于我需要突出显示的栏的索引的东西。

Answer 1

您可以从刻度对象访问标签对象。然后用css()方法修改。

document.getElementById('btn').onclick = function () {
  const tick = chart.get('x-axis-1').ticks[4];
  tick.label.css({
    backgroundColor: 'red',
    color: 'white'
  });
}

默认情况下标签是文本，它们不响应某些样式，例如背景颜色，因此要能够更改这些css，您应该将轴标签的 useHTML 设置为 true。

  xAxis: {
    id: 'x-axis-1',
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    labels: {
      useHTML: true
    }
  },

示例：http://jsfiddle.net/ggouvkv3/

在 Highcharts 中突出显示 x 轴标签

Hightlight x-axis label in Highcharts

css

highcharts

typescript

typescript2.0