Question

我想创建一个没有空格的柱形图，并且根据日期时间x轴在列之间没有重叠。

Highcharts.chart('container', {
    chart: { type: 'column' },
    title: {
        text: 'Month columns'
    },
    xAxis: {
        type: 'datetime',
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        column: {
            groupPadding: 0,
            pointPadding: 0,
            borderWidth: 0,
            grouping: false
        }
    },
    series: [{
        pointIntervalUnit: 'month',
        pointPadding: 0,
        groupPadding: 0,
        name: 'Test',
        negativeColor: 'rgb(223,83,83)',
        data: [{x: Date.UTC(2016,11), y:-1000},{x:Date.UTC(2017,0), y:-500}, {x:Date.UTC(2017,1), y: 500}, {x:Date.UTC(2017,2), y: 300}],
    }]
});

以下小提琴显示了问题： Spaces between columns

目标是列之间没有空格，它们不重叠。我假设这个空间是由一个月的持续时间变化引起的，例如： 30天，31天，28天，......但我认为这是由pointIntervalUnit：month选项处理的？

对于具有预期结果的替代系列安排的任何想法都受到高度赞赏。

非常感谢您提供任何帮助。

Answer 1

简单的解决方案是设置：pointPadding: -0.6, i series：JSFiddel

Answer 2

此处的问题是由默认pointRange值引起的：https://api.highcharts.com/highcharts/plotOptions.column.pointRange

在这种情况下，它等于28天 - 最短月份的长度 - 2017年2月（28天）。

在Highcharts中，使用pointRange或pointWidth来操纵单个点是不可能的（这些选项仅适用于一系列）。

最简单的解决方案就是将x轴的类型更改为'linear'（默认）并使用categories。

现场演示： https://jsfiddle.net/kkulig/ua4a14vu/

Highcharts：带有pointIntervalUnit月的柱形图导致不正确的空格？

2 个答案: