我有一个条形图,其中包含各个供应商的当前值和上一年的值。在相对的xAxis上,我有一个边距值。我可以通过以下示例解释我更想要的内容:
http://jsfiddle.net/0m3208qj/2/
这里发生的是,我也有Margin的当前值和以前的值。因此,折线图使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列中看到该行。我的问题是它显示在中间,我希望在相关列中显示它。
您可以尝试对行系列使用pointPlacement并通过为此参数设置任何数字值来移动它。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句