如何在HighCharts中以y轴显示类别中的所有数据？

Posted 2021-05-05

我想通过categories属性在数据的y轴上显示。我在一些例子中看到了传递数组

initLapChart() {
hcharts.chart(this.div.nativeElement, {
  chart: {
     ...
  },
  yAxis: {
    categories: ["0:20", "0:30", "0:40", "1:00", "1:15"],
    reversed: true,
    tickPixelInterval: 50,
    gridLineWidth: 1,
    ... 
  },
  ...
} 

但它只显示了前两个值，为什么？

答案

如果要显示所有类别，无论是否有数据，只需设置轴最小值和最大值：

    yAxis: {
        min: 0,
        max: 4,
        reversed: true,
        tickInterval: 1,
        categories: ['0:20', '0:30', '0:40', '1:00', '1:15'],
        labels: {
            step: 1
        }
    },

更新小提琴：

• http://jsfiddle.net/jlbriggs/y3ut4jdv/1/

或者，如果您预先定义类别，则可以通过编程方式执行此操作：

var categories = ['0:20', '0:30', '0:40', '1:00', '1:15'], 
    yMax = categories.length -1;

小提琴：

• http://jsfiddle.net/jlbriggs/y3ut4jdv/2/

另一答案

categories数组中的元素从0索引到categories.length - 1，因此数组中的第一个元素表示yAxis上的值0，第二个值表示值1等。如果要全部显示它们，则需要设置tickInterval和labels.step属性价值1。

API参考： http://api.highcharts.com/highcharts/yAxis.tickInterval http://api.highcharts.com/highcharts/yAxis.labels.step

例： http://jsfiddle.net/6qp0v887/