Highcharts Column Group Подсветка динамически

Question

Мы пытаемся адресовать каждую фоновую область группы столбцов по коду, чтобы при наведении указывать другой цвет фона.

Область, к которой мы пытаемся обратиться, показана здесь:

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-basic/

В приведенном выше коде область описывается как «Категория перекрестия Highcharts» ... которая постоянно перерисовывается при перемещении мыши ...

Кто-нибудь знает, как вручную вызвать это, чтобы подсвечиваться кодом?

Не похоже, что у старших графиков есть определенный элемент "G" для указанной группы столбцов ...

Highcharts.charts[0].columns[0].???

Answer 1

Для динамического отображения перекрестия можно использовать внутренний метод drawCrosshair:

chart.xAxis[0].drawCrosshair({}, chart.series[0].points[1]);

Демонстрационная версия: https://jsfiddle.net/BlackLabel/12ok6Lcy/

Answer 2

Вы можете сделать этот эффект при использовании column.point.events.mouseOver Документации , например:

plotOptions: {
  column: {
    pointPadding: 0.2,
    borderWidth: 0,
    point: {
      events: {
        mouseOver: function() {
          // console.log(this); // To view all params available
          if (this.index < 2){
            this.series.chart.xAxis[0].update({
              crosshair: {
                color: '#5090cc'
              }
            });
          } else if (this.index < 7){
            this.series.chart.xAxis[0].update({
              crosshair: {
                color: '#f0c680'
              }
            });
          } else {
            this.series.chart.xAxis[0].update({
              crosshair: {
                color: '#90d8a2'
              }
            });
          }
        },
      }
    }
  }
},

Fiddle