Изменить стиль метки xAxis при нажатии ряда данных, Highcharts / React

Question

Я пытаюсь добиться поведения в простой столбчатой ​​диаграмме в React, где я могу щелкнуть точку серии и выбрать стиль изменения метки xAxis. Кроме того, при повторном нажатии этот стиль должен быть удален. Это то же самое поведение, что и у нас при наведении мыши и наведении мыши, но для события щелчка. Я могу заставить его работать с событиями мыши, но не с событием щелчка.

Можно ли этого достичь? Это пример кода У меня есть.

Answer 1

Просто используйте функцию события щелчка, чтобы изменить стиль метки CSS. Например:

series: [{
  ...,
  point: {
    events: {
      click: function() {
        var ticks = this.series.xAxis.ticks,
          label,
          fontWeight;

        if (ticks[this.x]) {
          label = ticks[this.x].label;
          fontWeight = (
            label.styles.fontWeight && label.styles.fontWeight === 'bold'
          ) ? 'normal' : 'bold';

          ticks[this.x].label.css({
            'fontWeight': fontWeight
          });
        }
      }
    }
  }
}]

---

Демонстрационная версия: http://jsfiddle.net/BlackLabel/6m4e8x0y/4991/

Справочник по API:

https://api.highcharts.com/highcharts/series.column.events.click

https://api.highcharts.com/class-reference/Highcharts.SVGElement#css

Answer 2

Выполните следующие действия:

• Сохраните состояние, скажем current обновите его значение с помощью номера текущей оси при onClick
• Определите x-Axis и labels in Ваш config-options
• Используйте функцию форматирования внутри label. Эта функция предоставляет текущую ось value в качестве аргумента. используйте его и сравните с вашим current состоянием и динамически настройте стиль.

Рабочая копия образец кода здесь

Фрагмент кода

class App extends React.Component {
  state = {
    current: "black"
  };

  options = {
    tooltip: {
      enabled: false
    },
    xAxis: {
      labels: {
        formatter: item => {
          const color = this.state.current === item.value ? "red" : "black";
          const fontWeight =
            this.state.current === item.value ? "bold" : "normal";
          return `<span style="color: ${color}; font-weight: ${fontWeight}">${
            item.value
          }</span>`;
        }
      }
    },
    series: [
      {
        data: [1, 2, 3, 4],
        type: "column",
        colors: ["#000000"],
        cursor: "pointer",

        point: {
          events: {
            click: (e, x, y) => {
              this.setState({ current: e.point.x });
              console.log(e.target, e.point.x);
            }
            // mouseOver: function(e) {
            //     $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css({fontWeight: 'bold'});
            // },
            // mouseOut: function() {
            //     $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css({fontWeight: 'normal'});
            // }
          }
        }
      }
    ]
  };
  render() {
    return (
      <div>
        <h2>Highcharts</h2>
        <ReactHighcharts config={this.options} />
      </div>
    );
  }
}