在刻度

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/