highcharts Adding New Series Not Working

问题:

I have several charts that are added ids according to array data then they are rendered to the a particular chart according to its id. The ids are being added but the new chart data is not being updated. What is wrong with my code?

My_jsfiddle

 $('.bars').each(function(){    
    bars = new Highcharts.Chart({
           chart: {type:'bar',renderTo:this,backgroundColor:'#222',plotBorderWidth:0,plotBackgroundColor:{linearGradient:{ x1:0, y1:0, x2:0, y2:1 },stops: [[0.40, "#383838"],[1, "#000"],[0.50, "#383838"]]},plotBorderColor:'#a6a0a0',height:70},
            title: {align:'left',margin:5,style: {color:'#FFFFFF',fontSize:'10px',"text-transform":"uppercase"}},legend: {enabled:false},credits: {enabled:false},tooltip:{enabled:false},
            loading:{labelStyle:{fontWeight:'bold',color:'#FF0000',top:'10%'},style:{backgroundColor:'#222'},hideDuration:1000},
            xAxis: {labels: {enabled:false},tickWidth:0,tickInterval:0,gridLineWidth:0},
            yAxis: {labels: {enabled:false},title: {text:null},min:0,max:100,tickWidth:0,gridLineWidth:0},
            series: [{data:[5]}] 
     });

});

function test(){
    while(bars.series.length){
        bars.series[0].remove();
    }
var idS = [50,60,40,80],
    horiz = document.getElementById('horizBarGauage'),
    idSL = 4,
    j;
for (j=idSL;j--;){
    console.log('Logging', idS[j]);
        horiz.children[j].id = idS[j];
        console.log('Logging', horiz.children[j].id);
        var idData = idS[j];
        bars.renderTo = idData;
        bars.addSeries({data:[idData]});
        bars.redraw();            
   }        
}

test();

回答1:

Each time you create a chart, bars is being reset to that new chart. So in test() when you reference bars, it is using the most recently created chart.

In test() you need to find the actual chart that you what to edit:

var chart = $("#" + idS[j]).highcharts();
chart.addSeries({data: [idData] });