Highchart 条形图，其类别不占用整个容器宽度

Question

添加类别时，Highchart 条形图未采用其父容器的全宽。如果我评论类别或删除它们，图表将采用全宽。

请使用此链接https://jsfiddle.net/nu8dyw13/2/检查问题。

Highcharts.chart('container', { legend: { enabled: false, }, boost: { useGPUTranslations: true, }, tooltip: { enabled: false, }, chart: { type: "bar", height: 50, marginTop: 5, animation: true, shadow: false, }, title: {}, credits: { enabled: false, }, xAxis: { categories: [""], title: {}, lineWidth: 0, top: 20, height: 10, }, yAxis: { offset: 0, labels: { y: 15, align: "center", }, gridLineWidth: 0.5, gridLineDashStyle: "Dash", gridZIndex: 10, top: 20, height: 10, categories: ["LOW", "MEDIUM", "HIGH", "GDM"], plotBands: [ { from: 0, to: 1, color: "#E3E3E3", borderColor: "#6B6B6B", borderWidth: 1, }, { from: 1, to: 2, color: "#F9FAFC", borderColor: "#6B6B6B", borderWidth: 1, }, { from: 2, to: 3, color: "#E3E3E3", borderColor: "#6B6B6B", borderWidth: 1, }, ], min: 0, max: 3, title: { text: null, }, }, series: [ { type: "bar", data: [ { y: 2, color: "#B3C618", }, ], }, ], });

我尝试覆盖 CSS 并添加宽度属性，但它不起作用。有人可以帮忙吗？

Answer 1

为了解决这个问题，我建议删除类别（它们导致问题）并使用 labels.formatter 函数，它将返回每个刻度的正确类别。

  formatter: function() {
    const categories = ["LOW", "MEDIUM", "HIGH", "GDM"];

    return categories[this.pos]
  }

API参考： https://api.highcharts.com/highcharts/yAxis.labels.formatter

演示： https://jsfiddle.net/BlackLabel/x7L0ofkr/