某些数据的 highcharts 列太宽答案

【问题标题】：highcharts columns too wide with certain data某些数据的 highcharts 列太宽
【发布时间】：2016-12-16 05:22:28
【问题描述】：

我创建了一个带有日期时间 xAxis 且没有其他选项的简单柱形图。如果我添加简单数据 [342, 351, ...]，它会按预期绘制，列的大小适合空间。但是，当我使用 [x,y] 数据对 [[1481863920000,326],[1481863915000,330],...] 时，列变得过宽并相互重叠。

jsFiddle 显示问题 http://jsfiddle.net/7hoes1p9/

    Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Column chart with fat columns'
    },
    xAxis: {
        type: 'datetime'
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'John',
        data: [[1481863920000,326],[1481863915000,330],[1481863910000,418],[1481863905000,384],[1481863900000,329],[1481863895000,342],[1481863890000,550],[1481863885000,639],[1481863880000,488],[1481863875000,375],[1481863870000,532],[1481863865000,397],[1481863860000,362],[1481863855000,312],[1481863850000,373],[1481863845000,373],[1481863840000,344],[1481863835000,356],[1481863830000,545],[1481863825000,646],[1481863820000,454],[1481863815000,328],[1481863810000,553],[1481863805000,407]]
    }]
});

我是否需要覆盖一些默认行为才能获得正确的列？我需要取消设置最小列宽吗？是否需要以不同方式添加数据？任何帮助将不胜感激。

【问题讨论】：

你能分享一下你的图表是什么样子的吗？

标签： highcharts

【解决方案1】：

当您将日期时间轴与列和条等系列一起使用时，您应该指定pointRange 属性。它定义了单个列的有效时间范围。

 series: [{
        pointRange: 1000,

示例：http://jsfiddle.net/7hoes1p9/5/

【讨论】：

成功了！对于我的情况，点之间的间隔为 5000 毫秒，pointRange 为 10000 会产生预期的列自动厚度。

【解决方案2】：

您需要添加 .pointwidth 以获得列的最佳宽度，如此小提琴中的 here 所示

 column: {
                pointWidth: 1,
            }

或其他选项请参阅此线程here

【讨论】：

是的，这将得到窄列，但我希望它们自动调整大小以填充空间。如果有很多值，1 可能有意义，但如果图表稀疏，我希望列更宽。指定一个有意义的 pointRange（见下文）得到了我正在寻找的自动行为。

【解决方案3】：

在图表选项中检查以下内容：

plotOptions: {
            series: {
                pointWidth: 5
            }
        }

【讨论】：