HIghcharts列标记未与列对齐

时间:2017-11-15 12:04:10

标签: highcharts

我有一个包含11列的柱形图,我希望在每列中间的x轴上有一个带标签的刻度线。但是,我无法获得与我的列对齐的标记和标签。我创建了一个jsfiddle来说明我的问题。我在x轴上设置了min,max和tickInterval,但它似乎根本没有使用最小值和最大值。相反,我的开始刻度显示7.2和最后27。我做错了什么?

https://jsfiddle.net/LLExL/8218/

Highcharts.chart('container', {
    "chart": {
        "width": 850,
        "height": 450,
    type: 'column'
    },
  plotOptions: {
    column: {
      pointPlacement: 'between'
    }
  },
    "yAxis": [{
        "lineWidth": 1,
        "gridLineWidth": 1,
        "tickWidth": 1,
    }],
    "xAxis": [{
        "startOnTick": true,
        "endOnTick": true,
        "min": 8,
        "max": 26,
        "tickInterval": 1.8,
        "gridLineWidth": 1,
        "tickWidth": 1,
    tickmarkPlacement: 'on'
    }],
    "series": [{
        "data": [
            [8, 4.15],
            [9.8, 17.61],
            [11.6, 48.32],
            [13.4, 108.65],
            [15.2, 53.92],
            [17, 138.87],
            [18.8, 152.77],
            [20.6, 69.17],
            [22.4, 18.27],
            [24.2, 8.82],
            [26, 1.43]
        ],
        "name": "Test",
    "pointStart": 8,
    "pointInterval": 1.8
    }]
});

1 个答案:

答案 0 :(得分:1)

使用tickPositions您可以在任何您想要的地方添加刻度线。例如,为了适应您的列,您可以执行以下操作:

xAxis: [{
  tickPositions: [8, 9.8, 11.6, 13.4...]
  ...
}]

工作示例https://jsfiddle.net/ewolden/LLExL/8219/

xAxis.tickPositions上的

API: https://api.highcharts.com/highcharts/xAxis.tickPositions