Question

我创建了一个简单的柱形图，其中包含日期时间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]]
    }]
});

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

Answer 1

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

 series: [{
        pointRange: 1000,

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

Answer 2

您需要添加。pointwidth以获得最佳的列宽，如此小文件中的here所示

 column: {
                pointWidth: 1,
            }

或其他选项引用此帖子here

Answer 3

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

plotOptions: {
            series: {
                pointWidth: 5
            }
        }

highcharts列太宽，有某些数据

3 个答案: