Highcharts Overlapping bar with single Legends重复

时间:2013-12-11 11:42:23

标签: javascript json highcharts

我有一个功能,我必须显示一年的实际值和假设值作为一个条。实际条形应在假定值栏内。案例就像有类别列表一样,也会出现在传说中的类别(在通常的例子中它将是不同的类别),(即)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();

0 个答案:

没有答案