Highcharts：可变宽度列的困难

这是一个后续，但我觉得这个问题需要一个新的职位，而不是继续在上述职位的评论

为了实现可变宽度的列，基本上需要一些技巧。那就是使用多个系列。。。每列宽度需要一个系列

但是这种方法会导致列的放置问题，需要另一种方法才能将列移动到正确的位置

但这就产生了一个问题，图表区域的边缘和y轴之间有一个很大的间隙。因此，需要另一个黑客来消除这个差距

但这似乎产生了另一个问题，那就是它把图表上任何其他序列中最左边的数据点弄乱了

这在以下JSFIDLE中进行了说明：

当光标位于最左边的两列上时，您将看到发生了一些有趣的事情。如果取消共享工具提示，问题似乎是工具提示在最左侧的两个样条曲线点上根本不起作用

有办法解决这个问题吗？很遗憾，您不能将可变列宽作为本机特性，指定每点的列宽

谢谢

JSFIDLE代码如下所示：

$(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的4.1.4版本，它工作得更好：我不同意。在4.1.4中，共享工具提示似乎以另一种方式出现问题。。。在共享和非共享之间切换。在JSFIDLE链接中，尝试沿着条的底部从左到右缓慢移动光标。工具提示上下跳跃，有时共享列和样条曲线，有时只显示列信息。看起来工具提示仍然有点问题。使用非共享工具提示和自定义格式化程序如何？然后将followPointer设置为true，请参见：-现在缺少的唯一内容不是突出显示的列，但可以通过调用point.setstatehaver和point.setState来修复，以便在必要时管理突出显示。