javascript - 将轴标签与刻度下的类型类别对齐

Question

我有一个类似于以下示例的图表(从 Highcharts 示例复制并针对我的问题的使用进行了修改):

http://jsfiddle.net/zryrgh3f/

Highcharts.chart('container', {
    title: {
        text: 'Chart reflow is set to true'
    },

    subtitle: {
        text: 'When resizing the window or the frame, the chart should resize'
    },


    xAxis: {
        categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        labels: {
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

对于相同的数据集，我真正需要的是:

标签应向左移动到刻度线下方，并且应在最后一个刻度线下方添加下一个数字的附加标签(计算标签的值，以便预先知道要添加的值)(上面用红色写出) )。请注意，数据点相对于刻度的位置不会改变。

我猜我需要人为地添加额外的刻度，但我该如何做到这一点，以及如何首先正确定位所有标签？在我的第二个图表中，我硬编码了要偏移的像素数，但我正在寻找更好、更动态的解决方案，因为我的实际图表大小可能会随着调整大小而变化。

Answer 1

对于您的图表，您应该能够将 xAxis.tickmarkPlacement 与系列的 pointPlacement 选项一起使用。此选项允许您在刻度上以及刻度之间的数据点上添加标签。

http://api.highcharts.com/highcharts/xAxis.tickmarkPlacement http://api.highcharts.com/highcharts/plotOptions.series.pointPlacement

Highcharts.chart('container', {
  title: {
    text: 'Chart reflow is set to true'
  },
  subtitle: {
    text: 'When resizing the window or the frame, the chart should resize'
  },
  xAxis: {
    categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'],
    min: 0,
    max: 12,
    tickmarkPlacement: 'on',
    labels: {}
  },
  series: [{
  pointPlacement: 'between',
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});

http://jsfiddle.net/zryrgh3f/3/