Highcharts 中的突出显示 x 轴标签

debugcn 发表于 Dev

普格切夫

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

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

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

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

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

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
           }
}

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

摩根弗里

您可以从刻度对象访问标签对象。然后用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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。