Highcharts将不同宽度的列分组,自动填充整个空间

时间:2018-04-19 13:57:29

标签: highcharts

我有这个:

Columns with empty spaces

我需要这个:

Columns without empty spaces

我有前24个时间间隔的每小时数据,然后是以下时间间隔的三小时数据。

我找不到这个选项,我不想使用pointRange选项,因为我希望每列只有一个系列。

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

感谢Kamil Kulig,我从variwide类型创建了一个新类型。 variwide类型有一个奇怪的postTranslate函数,它会使轴转换失真,而且对于x轴日期时间它不起作用。

/**
 * Variable width column type
 */
H.seriesType('varicolumn', 'column', {}, {
    init: function () {
        H.seriesTypes.column.prototype.init.apply(this, arguments);

        this.chart.columnCount = (this.chart.columnCount) ? this.chart.columnCount + 1 : 1;
    },
    translate: function () {
        H.seriesTypes.column.prototype.translate.call(this);

        var points = this.points,
            chart = this.chart;

        H.each(points, function (point, i) {
            var lastPoint = points[i - 1],
                nextPoint = points[i + 1],
                shapeArgs = point.shapeArgs,
                width = (lastPoint) ? point.plotX - lastPoint.plotX : nextPoint.plotX - point.plotX,
                groupingPos = chart.columnCount - point.series.columnIndex;

            shapeArgs.width = width / chart.columnCount;
            shapeArgs.x = Math.round(point.plotX - (shapeArgs.width * groupingPos));
        }, this);
    }
});