使用xaxis和yaxis的字母标签时的丑陋Highchart

Posted 2021-05-05

我试图在xAxis和yAxis上创建带有文本标签的图表，就像这样

Example

我可以通过这种配置来实现

$(function() {
  var chart = Highcharts.chart('chart-container', {
    chart: {
      type: 'bar',
    },
    title: {
      text: '',
      floating: true
    },
    legend: {
      enabled: false
    },
    tooltip: {
      pointFormat: '<b>{point.y:.2f}</b><br/>'
    },
    xAxis: {
      gridLineColor: '#7F7F7F',
      lineColor: '#7F7F7F',
      gridLineWidth: 1,
      tickLength: 0,
      labels: {
        align: 'left',
        reserveSpace: true
      },
      categories: ['1. - 4. trinn (frivillige øvelser)', '1. - 4. trinn (obligatorisk ferdighetsprøve)', '5. - 7. trinn (frivillige øvelser)', '8. - 10. trinn (frivillige øvelser)']
    },
    yAxis: {
      min: 31.83333,
      max: 100,
      title: {
        text: null
      },
      gridLineWidth: 1,
      tickLength: 0,
      gridLineColor: '#7F7F7F',
      lineColor: '#7F7F7F',
      categories: {
        '33.33333': 'Må øve mer',
        '66.66667': 'På god vei',
        '100': 'Kan'
      },
      tickPositions: [0, 33.33333, 66.66667, 100],
      plotBands: [{

        from: 31.83333,
        to: 33.33333,
        color: '#CC3333'
      }, {
        from: 65.16667,
        to: 66.66667,
        color: '#F2BA38'
      }, {
        from: 33.33333,
        to: 34.83333,
        color: '#CC3333'
      }, {
        from: 66.66667,
        to: 68.16667,
        color: '#F2BA38'
      }, {
        from: 97,
        to: 100,
        color: '#77B800'
      }]
    },
    plotOptions: {
      series: {
        pointPadding: 0,
        borderWidth: 0
      }
    },
    series: [{
      name: '',
      color: '#646464',
      borderColor: '#464646',
      borderWidth: 1,
      data: [0, 66.6666666666667, 0, 0]
    }]
  })

});

https://jsfiddle.net/ngoclamnn/nu2fwzrn/

但你可以看到它在0值上有点“怪异”，也许它是Highchart的一个bug？

你还有另一种解决方法吗？

答案

使用this answer我能够找到解决方案。将yAxis类别创建为变量，并使用答案用于插入它们的相同功能，即：

 var categories = {0: '', 33.33333: 'Må øve mer', 66.66667: 'På god vei', 100: 'Kan'}

然后在图表中：

yAxis: {
  labels: {
    enabled: true,
    formatter: function() {
      return categories[this.value];
    }
  },
  tickInterval: 1,
  minPadding: 0,
  maxPadding: 0,
  startOnTick: true,
  endOnTick: true,
...
}

工作示例：https://jsfiddle.net/nu2fwzrn/73/

确保upvote the original answer。