Highcharts의 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로, 당신이해야 그 자체 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/