Highcharts列系列：将分类的x轴标签居中

Question

我正在使用React-JSX-Highcharts处理柱状图之类的直方图。我有6个类别，其中5个类别有10个数据点，第6个类别和最终类别有30个数据点。我试图使刻度线从每个类别开始，但类别标签位于刻度线之间。我可以通过设置x轴标签x: 150来实现这一点，但是，我了解到它没有响应。

这是我想要实现的目标：

想知道我是否（A）使用错误的方法，（B）使用错误的序列类型（我尝试了直方图，但是我的箱是按类别分类的，因此结果被堆积在列中），或者（C）如果我已经接近了，如果有人可以找到一种解决方案来快速将标签居中。

Highcharts.chart('container', {
    chart: {
    type: 'column'
},
xAxis: {
    categories: [
  "VERY LOW",
  "LOW",
  "MEDIUM",
  "HIGH",
  "VERY HIGH",
  "EXTREMELY HIGH"
],
tickInterval: 10,
startOnTick: true,
tickMarkPlacement: 'between',
type: 'category',
endOnTick: false,
showTempty: true,
},
series: [{
    data: [
  {x: 0, name: 'VERY LOW', y: 0.2},
  {x: 1, name: 'VERY LOW', y: 0.2},
  {x: 2, name: 'VERY LOW', y: 0.8},
  {x: 3, name: 'VERY LOW', y: 1},
  {x: 4, name: 'VERY LOW', y: 1.1},
  {x: 5, name: 'VERY LOW', y: 1.1},
  {x: 6, name: 'VERY LOW', y: 1.3},
  {x: 7, name: 'VERY LOW', y: 1.5},
  {x: 8, name: 'VERY LOW', y: 2},
  {x: 9, name: 'VERY LOW', y: 1.5},
  {y: 2.1, x: 10, name: 'LOW'},
  {y: 2.1, x: 11, name: 'LOW'},
  {y: 2.4, x: 12, name: 'LOW'},
  {y: 2.5, x: 13, name: 'LOW'},
  {y: 2.1, x: 14, name: 'LOW'},
  {y: 2.6, x: 15, name: 'LOW'},
  {y: 2.0, x: 16, name: 'LOW'},
  {y: 2.7, x: 17, name: 'LOW'},
  {y: 2.9, x: 18, name: 'LOW'},
  {y: 2.5, x: 19, name: 'LOW'},
  {y: 2.5, x: 20, name: 'MEDIUM'},
  {y: 3.3, x: 21, name: 'MEDIUM'},
  {y: 3.0, x: 22, name: 'MEDIUM'},
  {y: 2.9, x: 23, name: 'MEDIUM'},
  {y: 2.8, x: 24, name: 'MEDIUM'},
  {y: 2.6, x: 25, name: 'MEDIUM'},
  {y: 2.5, x: 26, name: 'MEDIUM'},
  {y: 2.1, x: 27, name: 'MEDIUM'},
  {y: 2.2, x: 28, name: 'MEDIUM'},
  {y: 2.2, x: 29, name: 'MEDIUM'},
  {y: 2.2, x: 29, name: 'MEDIUM'},
  {y: 2.0, x: 30, name: 'HIGH' },
  {y: 2.0, x: 31, name: 'HIGH' },
  {y: 1.5, x: 32, name: 'HIGH' },
  {y: 1.3, x: 33, name: 'HIGH' },
  {y: 1.2, x: 34, name: 'HIGH' },
  {y: 1.1, x: 35, name: 'HIGH' },
  {y: 1.1, x: 36, name: 'HIGH' },
  {y: 1.0, x: 37, name: 'HIGH' },
  {y: 0.9, x: 38, name: 'HIGH' },
  {y: 0.7, x: 39, name: 'HIGH' },
  {y: 3.1, x: 40, name: 'VERY HIGH'},
  {y: 0.3, x: 41, name: "VERY HIGH"},
  {y: 0.3, x: 42, name: "VERY HIGH"},
  {y: 0.1, x: 43, name: "VERY HIGH"},
  {y: 0.1, x: 44, name: "VERY HIGH"},
  {y: 0.1, x: 45, name: "VERY HIGH"},
  {y: 0, x: 46, name: "VERY HIGH"},
  {y: 0, x: 47, name: "VERY HIGH"},
  {y: 0, x: 48, name: "VERY HIGH"},
  {y: 0, x: 49, name: "VERY HIGH"},
  {y: 0.3, x: 50, name: "EXTREMELY HIGH"},
  {y: 0.3, x: 51, name: "EXTREMELY HIGH"},
  {y: 0.3, x: 52, name: "EXTREMELY HIGH"},
  {y: 0.1, x: 53, name: "EXTREMELY HIGH"},
  {y: 0.1, x: 54, name: "EXTREMELY HIGH"},
  {y: 0.1, x: 55, name: "EXTREMELY HIGH"},
  {y: 0, x: 56, name: "EXTREMELY HIGH"},
  {y: 0, x: 57, name: "EXTREMELY HIGH"},
  {y: 0, x: 58, name: "EXTREMELY HIGH"},
  {y: 0, x: 59, name: "EXTREMELY HIGH"},
  {y: 0, x: 60, name: "EXTREMELY HIGH"},
  {y: 0, x: 61, name: "EXTREMELY HIGH"},
  {y: 0, x: 62, name: "EXTREMELY HIGH"},
  {y: 0, x: 63, name: "EXTREMELY HIGH"},
  {y: 0, x: 64, name: "EXTREMELY HIGH"},
  {y: 0, x: 65, name: "EXTREMELY HIGH"},
  {y: 0, x: 66, name: "EXTREMELY HIGH"},
  {y: 0, x: 67, name: "EXTREMELY HIGH"},
  {y: 0, x: 68, name: "EXTREMELY HIGH"},
  {y: 0, x: 69, name: "EXTREMELY HIGH"},
]
}]

}）;

JSFiddle

Answer 1

一种通过使用jQuery resize events来检测图表大小何时更改的方法来进行响应，并在此之后进行动态更新（如果使用此解决方案，请不要忘记包括jQuery）。像这样：

$(window).resize(function() {
  setTimeout(function() {
    chart.update({
      xAxis: {
        labels: {
          x: chart.xAxis[0].len / (chart.xAxis[0].tickPositions.length * 2)
        }
      }
    }, true)
  }, 100)
});

我正在使用与您相同的xAxis.labels.x值，但是我正在动态计算它。

chart.xAxis[0].len-是xAxis的长度（以像素为单位）。

(chart.xAxis[0].tickPositions.length * 2)是x轴上的刻度数乘以2，因为我们希望位于两个刻度之间的中心，而不是刻度标记。

使用

setTimeout是因为如果我们在调整用户大小时立即更新页面，则位置将不正确。因此，我们等待0.1秒，然后更新。

除此之外，在页面的第一个呈现中，没有调整大小事件。因此，为了调整大小，我像这样使用highchart load event：

chart: {
  type: 'column',
  events: {
    load: function() {
      this.update({
        xAxis: {
          labels: {
            x: this.xAxis[0].len / (this.xAxis[0].tickPositions.length * 2)
          }
        }
      }, true)
    }
  }
},

使用相同的更新功能，使用this而不是chart，因为图表尚未完全初始化。

var chart = Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      load: function() {
        //Position the labels for the initial rendering
        this.update({
          xAxis: {
            labels: {
              x: this.xAxis[0].len / (this.xAxis[0].tickPositions.length * 2)
            }
          }
        }, true)
      }
    }
  },
  xAxis: {
    categories: [
      "VERY LOW",
      "LOW",
      "MEDIUM",
      "HIGH",
      "VERY HIGH",
      "EXTREMELY HIGH"
    ],
    labels: {
      rotation: 0,

    },
    tickInterval: 10,
    startOnTick: true,
    tickMarkPlacement: 'between',
    type: 'category',
    endOnTick: false,
    showTempty: true,
  },
  series: [{
       data: [
      {x: 0, name: 'VERY LOW', y: 0.2},
      {x: 1, name: 'VERY LOW', y: 0.2},
      {x: 2, name: 'VERY LOW', y: 0.8},
      {x: 3, name: 'VERY LOW', y: 1},
      {x: 4, name: 'VERY LOW', y: 1.1},
      {x: 5, name: 'VERY LOW', y: 1.1},
      {x: 6, name: 'VERY LOW', y: 1.3},
      {x: 7, name: 'VERY LOW', y: 1.5},
      {x: 8, name: 'VERY LOW', y: 2},
      {x: 9, name: 'VERY LOW', y: 1.5},
      {y: 2.1, x: 10, name: 'LOW'},
      {y: 2.1, x: 11, name: 'LOW'},
      {y: 2.4, x: 12, name: 'LOW'},
      {y: 2.5, x: 13, name: 'LOW'},
      {y: 2.1, x: 14, name: 'LOW'},
      {y: 2.6, x: 15, name: 'LOW'},
      {y: 2.0, x: 16, name: 'LOW'},
      {y: 2.7, x: 17, name: 'LOW'},
      {y: 2.9, x: 18, name: 'LOW'},
      {y: 2.5, x: 19, name: 'LOW'},
      {y: 2.5, x: 20, name: 'MEDIUM'},
      {y: 3.3, x: 21, name: 'MEDIUM'},
      {y: 3.0, x: 22, name: 'MEDIUM'},
      {y: 2.9, x: 23, name: 'MEDIUM'},
      {y: 2.8, x: 24, name: 'MEDIUM'},
      {y: 2.6, x: 25, name: 'MEDIUM'},
      {y: 2.5, x: 26, name: 'MEDIUM'},
      {y: 2.1, x: 27, name: 'MEDIUM'},
      {y: 2.2, x: 28, name: 'MEDIUM'},
      {y: 2.2, x: 29, name: 'MEDIUM'},
      {y: 2.2, x: 29, name: 'MEDIUM'},
      {y: 2.0, x: 30, name: 'HIGH' },
      {y: 2.0, x: 31, name: 'HIGH' },
      {y: 1.5, x: 32, name: 'HIGH' },
      {y: 1.3, x: 33, name: 'HIGH' },
      {y: 1.2, x: 34, name: 'HIGH' },
      {y: 1.1, x: 35, name: 'HIGH' },
      {y: 1.1, x: 36, name: 'HIGH' },
      {y: 1.0, x: 37, name: 'HIGH' },
      {y: 0.9, x: 38, name: 'HIGH' },
      {y: 0.7, x: 39, name: 'HIGH' },
      {y: 3.1, x: 40, name: 'VERY HIGH'},
      {y: 0.3, x: 41, name: "VERY HIGH"},
      {y: 0.3, x: 42, name: "VERY HIGH"},
      {y: 0.1, x: 43, name: "VERY HIGH"},
      {y: 0.1, x: 44, name: "VERY HIGH"},
      {y: 0.1, x: 45, name: "VERY HIGH"},
      {y: 0, x: 46, name: "VERY HIGH"},
      {y: 0, x: 47, name: "VERY HIGH"},
      {y: 0, x: 48, name: "VERY HIGH"},
      {y: 0, x: 49, name: "VERY HIGH"},
      {y: 0.3, x: 50, name: "EXTREMELY HIGH"},
      {y: 0.3, x: 51, name: "EXTREMELY HIGH"},
      {y: 0.3, x: 52, name: "EXTREMELY HIGH"},
      {y: 0.1, x: 53, name: "EXTREMELY HIGH"},
      {y: 0.1, x: 54, name: "EXTREMELY HIGH"},
      {y: 0.1, x: 55, name: "EXTREMELY HIGH"},
      {y: 0, x: 56, name: "EXTREMELY HIGH"},
      {y: 0, x: 57, name: "EXTREMELY HIGH"},
      {y: 0, x: 58, name: "EXTREMELY HIGH"},
      {y: 0, x: 59, name: "EXTREMELY HIGH"},
      {y: 0, x: 60, name: "EXTREMELY HIGH"},
      {y: 0, x: 61, name: "EXTREMELY HIGH"},
      {y: 0, x: 62, name: "EXTREMELY HIGH"},
      {y: 0, x: 63, name: "EXTREMELY HIGH"},
      {y: 0, x: 64, name: "EXTREMELY HIGH"},
      {y: 0, x: 65, name: "EXTREMELY HIGH"},
      {y: 0, x: 66, name: "EXTREMELY HIGH"},
      {y: 0, x: 67, name: "EXTREMELY HIGH"},
      {y: 0, x: 68, name: "EXTREMELY HIGH"},
      {y: 0, x: 69, name: "EXTREMELY HIGH"},
    ]
  }]
});
$(window).resize(function() {
  setTimeout(function() {
    chart.update({
      xAxis: {
        labels: {
          x: chart.xAxis[0].len / (chart.xAxis[0].tickPositions.length * 2)
        }
      }
    }, true)
  }, 100)
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="container" style="height: 400px"></div>

工作中的JSFiddle示例： https://jsfiddle.net/ewolden/nLcveqp9/29/