Highcharts：在绘制多个系列时删除额外的边距 y 轴

Question

我有一个包含两个不同日期时间系列的图表，第一个系列是线性的并且包含月度值，而第二个系列是列系列并且每年只包含一个值。

当我在一个图表中显示两个系列时（一个 x-axis [日期时间]，两个 y-axes），第一个图不是绘制在左侧，而是在 y 轴上填充(see example here).

series: [{
        name: 'Monthly',
        type: 'line',
        yAxis: 0,
        data: [
            [Date.UTC(2012, 0, 31), 11],
            [Date.UTC(2012, 1, 28), 12],
            [Date.UTC(2012, 2, 31), 13],
            (...etc...)
            [Date.UTC(2014, 9, 31), 22],
            [Date.UTC(2014, 10, 30), 21],
            [Date.UTC(2014, 11, 31), 20]
        ]
    }, {
        name: 'Yearly',
        type: 'column',
        yAxis: 1,
        data: [
            [Date.UTC(2012, 5, 30), 16],
            [Date.UTC(2013, 5, 30), 17],
            [Date.UTC(2014, 5, 30), 18]
        ]
    }]

如果我只在图表中放置线性序列 (like this)，则图表会很好地放在图表的左右两端。这也是我想为 linear/column 组合实现的目标。

有人可以帮忙吗？提前致谢。

Answer 1

出现此问题是因为您的第二个系列 'Yearly' 的数据点在年中。 Highcharts 总是首先计算不同系列的间隔。因此，在您的情况下，它会根据第二个系列的间隔（以年为单位）缩放 x 轴：

        [Date.UTC(2012, 5, 30), 16],   
        [Date.UTC(2013, 5, 30), 17],   // year after last datapoint
        [Date.UTC(2014, 5, 30), 18]    // year after last datapoint

然后，它会尝试将x轴起点放在这样一个数据点：Date.UTC(2012, 5, 30)（最好是第一个）。唯一的问题是：您的 first 系列开始于 before 此数据点，并且其数据点之间的间隔 smaller 。然后 highcharts 所做的是选择最大间隔（在您的情况下为年），然后尝试找到低于最低数据点的间隔。

因此对于您的情况是：

Date.UTC(2012, 0, 31) - a year
(lowest datapoint)     (largest interval)

x轴上限同理

我找到了一种计算此差异并对其进行补偿的方法：

var begin        = Date.UTC(2012, 0, 31);     // the earliest/first time of both series
var end          = Date.UTC(2014, 11, 31);    // the latest/last time of both series
var beginLargest = Date.UTC(2012, 5, 30);     // the first time of the series with the
                                              // .. largest interval between datapoints
var endLargest   = Date.UTC(2014, 5, 30);     // the last time of the series with the
                                              // .. largest interval between datapoints

var yearRange    = (end - begin)/(365*60*60*24*1000);
var yearBegExtra = (beginLargest - begin)/(365*60*60*24*1000);
var yearEndExtra = (endLargest - end)/(365*60*60*24*1000); 
var marginBegin  = yearBegExtra / yearRange;
var marginEnd    = yearEndExtra / yearRange;

现在我们可以补偿这个额外的保证金如下：

xAxis: {
    type: 'datetime',
    minPadding: -marginBegin + 0.005,    // +0.005 to give a little extra padding
    maxPadding: marginEnd    + 0.005    // .. which allows to see the ticks 2012 & 2015
}, ..

这给出了预期的图表。

Highcharts：在绘制多个系列时删除额外的边距 y 轴

Highcharts: Remove extra margin y-axis when plotting multiple series

jquery

highcharts

padding

linechart

DEMO