javascript - 使用 Highcharts，我想覆盖一条显示条形最佳值的线

Question

我试图在负堆积条形图的顶部覆盖 2 条对角线。这些线的目的是显示每个条的最佳值应该在哪里。

图表将始终沿 x 轴从 -10% 到 10%，因此如果图表增长，线条不需要缩小。（虽然如果它是一个小的补充，也很高兴知道如何做到这一点）

我对 HighCharts 比较陌生，我似乎无法确定这是否可能。

Answer 1

鉴于线的交点总是会在我做这个的同一点相交。我所做的是创建两个额外的系列，从 -10 到 0 和 10 到 0。你也可以用一个系列来做到这一点，但也许男性/女性投影线不同？你的选择。

现在，因为我不知道两条线应该在哪里相交，所以我让它们在最后一个类别结束。您可以通过给两个系列不同的端点来调整它。另一个技巧是为中间点填充 2 条投影线，并允许连接 2 个端点。我还隐藏了标记，从图例中隐藏了系列，并允许使用不同的线条样式。重要位：

{
        name: 'line1',
        type: 'line',
        color: 'black',
        dashStyle: 'dot',
        connectNulls: true,
        showInLegend: false,
        marker: {
            enabled: false
        },
        data: [0, null},
            ...
            , 10]}

由于这些数据系列是堆叠的，我们需要确保只有这些系列被堆叠，否则 2 条投影线也会被堆叠。通过以下方式执行此操作：

plotOptions: {
    bar: {
        stacking: 'normal',
        //pointWidth: 20
    }
},

请注意，仅将堆叠应用于“条形”类型。更新jsFiddle。