javascript - 更改 Highcharts 中特定刻度的样式

Question

仅当满足某些条件时才可以更改特定刻度标记。

{
    xAxis: {
        categories: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00',
            '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00',
            '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
        labels: {
            formatter() {
                const isCurrentHour = this.value === moment().format('HH:00');
                if (isCurrentHour) {
                    return (`<span class="currentHour">${this.value}</span>`);
                }
                return this.value;
            }
        }
    }
}

Answer 1

您无法通过配置来完成此操作，但可以通过包装 tick.render() 方法来完成此操作 - 它扩展了 Highcharts，了解更多信息 here

因此，您需要做的是更改 tick.mark 形状和 tick.label 样式。

const H = Highcharts;
H.wrap(H.Tick.prototype, 'render', function (p, i, o, op) {
  p.call(this, i, o, op);
  const axis = this.axis;

  if (axis.isXAxis && (this.pos === 18 || this.pos === 8)) {
    console.log(this)
    const mark = this.mark;
    const label = this.label;
    const d = mark.d.split(' ').map(v => {
      var n = Number(v);
      return H.isNumber(n) ? n : v;
    });

    d[2] -= 5;
    d[5] += 20;


    mark.attr({
      'stroke-width': 1,
      stroke: 'black',
      d: d.join(' ')
    });

    label.css({
      fontSize: '20px',
      fontWeigth: 'bold',
      color: 'black'
    });

    label.attr({
      y: label.xy.y - label.getBBox().height
    })
  }
});

实例和输出

http://jsfiddle.net/rw194Lz5/