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