我有一个功能,我必须显示一年的实际值和假设值作为一个条。实际条形应在假定值栏内。案例就像有类别列表一样,也会出现在传说中的类别(在通常的例子中它将是不同的类别),(即)x轴将是数字,y轴将是一个类别列表将是也有传奇。每个类别应该有一个图例,而在切换图例时,实际值和假定值都应该切换 任何人都可以帮忙吗?
Inputs are
<input type="hidden" id="lineSeries" value='[{"name":"Line Name","data":["EXPENSES","AMORTIZATION"],"value":0.0,"type":"","color":""}]'>
<input type="hidden" id="lineValueSeries" value='[{"name":"EXPENSES","data":["55"],"value":0.0,"type":"bar","color":""},{"name":"AMORTIZATION","data":["65"],"value":0.0,"type":"bar","color":""}]'>
<input type="hidden" id="lineAssumedSeries" value='[{"name":"EXPENSES","data":["70"],"value":0.0,"type":"bar","color":""},{"name":"AMORTIZATION","data":["85"],"value":0.0,"type":"bar","color":""}]'>
and chart is parsed like
var lineSeriesChart;
var options = {
chart: {
renderTo: 'LineItemContainer',
marginTop: 40,
marginBottom: 80,
width: 1100,
//height: length * 23, // 25px per data item plus top and bottom margins
//height: 500,
backgroundColor: null
},
title: {
align:'center',
useHTML: true,
style: {
fontSize:'14px',
fontFamily:'Verdana, sans-serif',
color:'#000000'
},
text: '<B>Financial - Cost Breakup </B>'
},
xAxis: {
categories: [],
labels: {
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
//fontWeight:'Bold'
}
},
tickmarkPlacement: 'on'
},
yAxis: {
min: 0,
title: {
align:'middle',
text:'Cost',
style: {
fontSize:'10px',
color:'#000000',
fontFamily:'Verdana, sans-serif',
fontWeight:'Bold'
}
},
lineWidth: 1,
offset:2
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b><br/>',
crosshairs: false
},
exporting: {
buttons: {
contextButtons: {
enabled: false,
menuItems: null
}
},enabled: false
}, credits: {
position: {
align: 'right'
},
style: {
color: '#3E576F'
},
useHTML: true,
text : ''</h3>'
},
legend: {
enabled:true,
borderWidth: 1,
itemMarginTop: 2,
itemMarginBottom: 2,
width:220,
itemWidth: 50,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
x: 0,
y: 0,
style: {
fontSize:'9px',
color:'#000000',
fontFamily:'Verdana, sans-serif'
},
itemStyle: {
color:'#000000',
fontSize:'9px',
fontFamily:'Verdana, sans-serif'
}
},
plotOptions: {
column: {
stacking: 'normal'
},
series:{
}
},
series: []
};
var lineSeries = eval( "("+document.getElementById('lineSeries').value+")") ;
var lineValueSeries = eval("("+document.getElementById('lineValueSeries').value+")") ;
for(var i=0;i<=lineSeries.length-1;i++){
var item = lineSeries[i];
for(var j=0;j<=item.data.length-1;j++){
options.xAxis.categories.push(item.data[j]);
var series = {
data: []
};
for(var k = 0; k <= lineValueSeries.length-1; k++){
if(j == k){
var itemValue = lineValueSeries[k];
series.name = itemValue.name;
series.type = itemValue.type;
series.data.push(parseInt(itemValue.data));
}
else{
series.data.push(parseInt(0));
}
}
options.series.push(series);
}
}
lineSeriesChart = new Highcharts.Chart(options);
lineSeriesChart.credits.hide();