Question

这是Highcharts: incorrect column placement with linked series?的后续行动，但我觉得这个问题需要一个新的帖子，而不是上述帖子中的评论的延续。

基本上，为了实现可变宽度列，需要一些hack。该hack是使用多个系列......每列宽度需要一个系列。

但是这个黑客会导致列的放置问题，而另一个黑客需要将它们移动到正确的位置。

但这会产生一个问题，即图表区域边缘与y轴之间存在较大差距。因此需要另一个黑客来消除差距。

但这似乎又造成了另一个问题，即它会扰乱图表上任何其他系列中最左边的数据点。

以下jsfiddle中说明了这一点：

http://jsfiddle.net/drmrbrewer/215tnLna/33/

当光标位于最左边两列时，你会发现有趣的事情正在发生。如果取消共享工具提示，问题似乎是工具提示在最左边的两个样条点上根本不运行。

有什么方法可以解决这个问题？遗憾的是，您可以将可变列宽作为本机功能，指定每个点的列宽...

感谢。

jsfiddle代码如下：

$(function () {
$('#container').highcharts({

    title: {
        text: 'Variable width columns'
    },

    xAxis: {
        type: 'datetime',
        tickInterval: 36e5,
        labels: {
            format: '{value:%H}'
        },
        // following are to eliminate gaps:
        min: 1428048000000-36e5 + (6 * 0.5 * 36e5),
        max: 1428127200000-36e5 - (6 * 0.5 * 36e5)
    },

    // seems to be a combination of min above
    // and tooltip.shared below that freezes the 
    // left-most two columns
    tooltip: {
        shared: true
    },

    legend: {
        enabled: false
    },

    plotOptions: {
        column: {
            groupPadding: 0,
            pointPadding: 0,
            borderWidth: 0,
            grouping: false,
            color: '#22CC00'
        }
    },

    series: [{
        name: 'spline',
        yAxis: 0,
        type: 'spline',
        zIndex: 5,
        data: [{"x":1428048000000,"y":8.6},{"x":1428051600000,"y":9},{"x":1428055200000,"y":8.1},{"x":1428058800000,"y":6.6},{"x":1428062400000,"y":5},{"x":1428073200000,"y":4.9},{"x":1428084000000,"y":4},{"x":1428094800000,"y":3.4},{"x":1428105600000,"y":2.4},{"x":1428127200000,"y":6.9}],
        color: '#2222CC'
    },
    // now the multiple series of columns having different widths, linked together...
    {
        name: 'column',
        type: 'column',
        data: [{"x":1428048000000,"y":8.6},{"x":1428051600000,"y":9},{"x":1428055200000,"y":8.1},{"x":1428058800000,"y":6.6},{"x":1428062400000,"y":5}],
        pointRange: 36e5,
        // following is to position the bars correctly
        pointPlacement: -0.5*(3/6)*(1/3)
    },{
        name: 'column',
        type: 'column',
        data: [{"x":1428073200000,"y":4.9},{"x":1428084000000,"y":4},{"x":1428094800000,"y":3.4},{"x":1428105600000,"y":2.4}],
        linkedTo: ':previous',
        pointRange: 3 * 36e5,
        // following is to position the bars correctly
        pointPlacement: -0.5*(3/6)
    },{
        name: 'column',
        type: 'column',
        data: [{"x":1428127200000,"y":6.9}],
        linkedTo: ':previous',
        pointRange: 6 * 36e5,
        // following is to position the bars as I want them
        pointPlacement: -0.5
    }]
});
});

Highcharts：可变宽度列的困难

0 个答案: