Highcharts 在高图表中只使某些条彼此接近

Highcharts 在高图表中只使某些条彼此接近,highcharts,Highcharts,我正在尝试生成具有堆叠柱和样条线的组合图。我拥有的类别示例有: “第4季度12”、“第3季度12”、“第2季度12”、“第1季度12”、“第4季度11”、“预测” 所以它将有6个条,但我希望'Q4 11'和'Forecast'彼此接近,我的意思是彼此接近。这是因为'Forecast'与'Q4 11'类别相关。我已经阅读了演示,但仍然不想让某些条彼此接近 这是我的代码,你也可以在中查看。谢谢阅读 $(function () { $('#container').highcharts({

我正在尝试生成具有堆叠柱和样条线的组合图。我拥有的类别示例有: “第4季度12”、“第3季度12”、“第2季度12”、“第1季度12”、“第4季度11”、“预测”

所以它将有6个条,但我希望'Q4 11'和'Forecast'彼此接近,我的意思是彼此接近。这是因为'Forecast'与'Q4 11'类别相关。我已经阅读了演示,但仍然不想让某些条彼此接近

这是我的代码,你也可以在中查看。谢谢阅读

$(function () {
    $('#container').highcharts({
        tooltip: { enabled: false },
        chart: {

        },
        title: {
            text: 'Desktop'
        },
        xAxis: {
            categories: ['Q4 12', 'Q3 12', 'Q2 12', 'Q1 12', 'Q4 11','Forecast']
        },
        yAxis:[ {
            min: 0,
            title: {
                text: 'TAM'
            },
            stackLabels: {
                enabled: false,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
          { // Secondary yAxis
            title: {
                text: 'Share',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} %',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true,
            min:0,max:100
        }
         ],
        legend: {
            align: 'right',
            x: -70,
            verticalAlign: 'top',
            y: 20,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },

        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: false,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black, 0 0 3px black'
                    }
                }
            }
        },
        series: [{
            name: 'HDD',
            type:'column',
            data: [0, 30, 40, 70, 20,30],
            stack:'old'

        },
         {
            name: 'SSHD',
             type:'column',
            data: [20, 20, 30, 20, 10,0],
              stack:'old'

        }, 
        {
            name: 'SSD',
             type:'column',
            data: [30, 40, 40, 20, 50,10],
             stack:'old'
        },
        {
            name: 'Share',
            type: 'spline',
            data: [10, 20, 40, 90,70],

        }
                ]
    });
});

您可以使用不同的系列,链接到主系列。在这种情况下,您可以为该特定条设置不同的选项,请参见:

现在您可以使用
pointPadding
groupPadding
进行操作,就像在一个例子中一样。或者您可以使用
pointPlacement
,如下所示:


注意,对于第二个解决方案,它只移动点,而不是整个类别。在Highcharts术语中,类别总是占据全部空间,并在每个类别之间平均划分

当我在这里应用代码时[它正在工作。但是当我在页面中应用代码时,它不工作。我如何解决这个问题?将Highcharts升级到4.0.3版本。