HighchartのHightlight 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' 
    }); 
} 

ラベルはテキストであり、彼らはその軸ラベルをtrueに、あなたべきSE useHTMLこれらのCSSを変更する機能を持つように、背景色のようないくつかのスタイルのための応答をしません。

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/