Question

我尝试在highcharts中创建柱形图，以显示日期时间轴上的月度数据。问题是杆之间的间距是不同的。例如，在2月之后，只有很小的间距，而在其他月份之后间距更大。也许这种情况正在发生，因为2月份只有28天。无论如何，这是我的代码：

Highcharts.chart('container', {
    chart: {
      type: 'column'
    },

    xAxis: [{
      type: 'datetime'
    }, {
      type: 'datetime',
      visible: false
    }],

    plotOptions: {
      column: {
                grouping: false,
        groupPadding: 0,
        pointPadding: 0,
        pointPlacement: 'between'
      }
    },

    series: [{
      name: 'Year',
      xAxis: 1,
      data: [25],
      zIndex: 4,
      color: '#222',
      pointStart: Date.UTC(2017, 0, 1),
      pointInterval: 1,
      pointIntervalUnit: 'year'
    }, {
      name: 'Month',
      data: [50, 100, 130, 160, 170, 200, 170, 165, 250, 200, 230, 160],
      pointStart: Date.UTC(2017, 0, 1),
      pointInterval: 1,
      pointIntervalUnit: 'month',
      zIndex: 2,
      color: 'red',
    }],
});

http://jsfiddle.net/bosngxk1/2/

我还在全年增加了另一个酒吧。您注意到已经提到的间距问题，并且年份区域有点太宽。您有任何想法如何解决这个问题吗？

Answer 1

如果您不介意，可以使用Highstock。有一个名为ordinal的轴选项。将此设置为true（默认情况下），所有点均等间隔。看看下面发布的示例。

API参考：
https://api.highcharts.com/highstock/xAxis.ordinal

例：
http://jsfiddle.net/k0k2n83p/

Answer 2

嗯，我猜除了使用分类x轴之外别无选择。我不喜欢这个解决方案，因为我不得不硬编码datetime值而不是使用datetime格式化程序等等。无论如何，通过如下定义xAxis，我得到了所需的图表布局。

xAxis: [{
        categories: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ],
        tickmarkPlacement: 'on'
    },
    {
        categories: [
            '2017'
        ],
        visible: false
    }]

小提琴：http://jsfiddle.net/hho4zrso/

正确对齐highcharts中的列

2 个答案: