更改数据系列单击上的xAxis标签样式，Highcharts / React

Question

我正在尝试在React的简单柱形图中实现某种行为，在这里我可以单击序列点并具有xAxis标签更改样式。另外，当您再次单击时，应删除该样式。这与鼠标悬停和鼠标悬停（单击事件）的行为相同。我可以使其与鼠标事件一起使用，但不能与单击事件一起使用。

这有可能实现吗？这是我的code sample。

Answer 1

执行以下操作：

• 保持状态，表示current用onClick上的当前轴号更新其值
• 在x-Axis中定义labels和config-options
• 使用formatter内部的label功能。该功能提供当前轴value作为参数。使用它并将其与您的current状态进行比较，并动态调整样式。

[C0的工作副本

代码段

code sample is here

Answer 2

只需使用click事件函数来更改标签CSS样式。例如：

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

---

实时演示：

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
          });
        }
      }
    }
  }
}]

API参考：

http://jsfiddle.net/BlackLabel/6m4e8x0y/4991/

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