条形图上的高线图

Question

我有一个条形图，其中包含各个供应商的当前和上一年的值。在xAxis的对面，我有一个边距值。我可以用下面的例子来解释我想要更好的东西：

http://jsfiddle.net/0m3208qj/2/

这里发生的事情是，我还有保证金的当前和以前的值。因此，折线图将xAxis加倍。我想要的是，对于每个xAxis值，应该有一行包含两个值。因此，让我们以列A为例。我想：-当前年份栏中的一个点，显示当前年份的利润-显示上一年利润的上一年条形图中的一点-连接两者的线-这一行不应继续到其他xAxis系列中。-每个xAxis都应该有自己的线，如上所述。

我希望我已经正确地解释了这一点。

这是代码：

$(function () {
            $('#container').highcharts({
                chart: {
                    //zoomType: 'xy',
                    height: 400
                },
                title: {
                    text: null
                },
                xAxis: [{ // Suppier names xAxis
                    categories: ['A','B','C','D','E','F','G','H','I','J'],
                    labels: { rotation: -90 }
                }],
                yAxis: [{ // Primary yAxis (Sales)
                    title: {
                        text: '<span class="axis-label">Sales Value (£)</span>',
                        useHTML: true,
                        style: {
                            color: '#89A54E'
                        }
                    },
                    min: 0,
                    }
                , { // Secondary yAxis (Margin %)
                    title: {
                        text: '<span class="axis-label">Margin</span>',
                        useHTML: true
                    },
                    labels: {
                        format: '{value}%'
                    },
                    opposite: true,
                    min: 0,
                    alignTicks: false,
                    gridLineWidth: 0
                }
                ],
                tooltip: {
                    shared: true
                },
                legend: {
                    enabled: true
                },
                credits: { enabled: false },
                plotOptions: {
                    //series: { pointWidth: 25 },
                    //column: {
                    //    pointPadding: 0.5,
                    //    borderWidth: 0
                    //},
                    line: {
                        dataLabels: {
                            enabled: true,
                            format: '{y}%',
                            style: {
                                fontWeight: 'bold',
                                color: '#000000',  
                            }
                        }
                    }
                },
                series: [{
                    name: 'Current Year',
                    color: '#FFA500',
                    type: 'column',
                    data: [104833.6400,38023.0500,49932.5400,21674.0000,37098.4700,42679.6700,29142.4800,34488.8000,33380.0000,15453.0000],
                    tooltip: {
                        valuePrefix: '£'
                    }
                }, {
                    name: 'Previous Year',
                    color: '#5882FA',
                    type: 'column',
                    data: [190233.6800,52147.4200,39609.5700,62502.0000,44805.4400,39057.4800,36631.0000,24868.9000,17111.6800,18819.7000],
                    tooltip: {
                        valuePrefix: '£'
                    }
                }, {
                    name: 'Margin',
                    type: 'spline',
                    yAxis: 1,
                    data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
                }]
            });
        });

编辑：

好的，这个例子展示了我想要做的事情：http://jsfiddle.net/0m3208qj/4/.你可以看到B列中的行。我的问题是它显示在中心，我希望它出现在相关的列中。

Answer 1

您可以尝试将pointPlacement用于线序列，并通过为此参数设置任何数值来移动它。