Question

我正在尝试使用堆积列和样条线生成组合图表。我所拥有的类别示例如下：＆＃39; Q4 12＆＃39;，＆＃39; Q3 12＆＃39;，＆＃39; Q2 12＆＃39;，＆＃39; Q1 12＆＃39;，＆＃39; Q4 11＆＃39;，＆＃39;预测＆＃39;

所以它会有6个小节，但我想要＆＃39; Q4 11＆＃39;和＆＃39;预测＆＃39;触摸＆＃39;，我的意思是彼此接近。这是因为＆＃39;预测＆＃39;与Q4 11＆＃39;有关。 category.I我已经在Stacked and Group column上阅读了演示版，但仍然没有想法让某些专栏彼此接近。

这是我的代码，您也可以在JSFiddle中查看它。感谢您阅读此内容。

$(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],

        }
                ]
    });
});

Answer 1

您可以使用与主要系列相关联的不同系列。在这种情况下，您可以为该特定条设置不同的选项，请参阅：http://jsfiddle.net/tQeF7/28/

现在，您可以像参考示例一样使用pointPadding和groupPadding。或者您可以使用pointPlacement，如下所示：http://jsfiddle.net/tQeF7/29/

注意，对于第二种解决方案，它仅移动点，而不是完整类别。在Highcharts中，类别总是占据整个空间并在每个之间均匀分配。

在Highcharts中只使某个酒吧彼此靠近

1 个答案: