highcharts更改圖表類型使用多個系列的下拉列表

你好我在這個編程領域的新手，即時通訊嘗試創建一個下拉列表圖表類型的圖表。我已經嘗試了很多解決方案，不幸的是沒有找到適合我的代碼的解決方案。。任何幫助表示讚賞，highcharts更改圖表類型使用多個系列的下拉列表

$(function() { 
var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     type: 'line', 
     title: 'please select a category' 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']//here we have a common timeline (dates) 
    } 
}); 

$(".test").change(function() { 
    var value = this.getAttribute("value"); 
    while (chart.series.length > 0) { 
     chart.series[0].remove(true); 
    } 
    if (value == 'a') { 
     chart.yAxis[0].setTitle({ text: "#Active Learners" }); 
     chart.setTitle({text: "Active Learners"}); 
     chart.addSeries({ 
      name: '#Active Leaners', 
      type: 'column', 
      color: '#43cd80', 
      data:[100, 200, 300, 400, 100, 200, 100,200,300,100,400,100]//no. of active learners   
     });  

    } else if (value == 'b') { 
     chart.addSeries({ 
      name: 'grade1', 
      type: 'column', 
      color: '#7FCDBB', 
      data:[100, 280, 300, 490, 670, 900,100,200,300,400,500,100]    
     }); 
     chart.addSeries({ 
      name: 'grade2', 
      type: 'column', 
      color: '#41B6C4', 
      data:[100, 200, 300, 400, 100, 200,900,800,300,500,200,100]    
     });      
     chart.addSeries({ 
      name: 'grade3', 
      type: 'column', 
      color: '#1D91C0', 
      data:[234,578,234,895,234,54,214,234,474,214,123,235]    
     }); 
     chart.addSeries({ 
      name: 'grade4', 
      type: 'column', 
      color: '#253494', 
      data:[343,132,467,124,214,55,73,546,435,23,56,746]    
     });    
     chart.yAxis[0].setTitle({ text: "#Learners" }); 
     chart.setTitle({ text: "Learners per grade" }); 
    } else if (value == 'c') { 
     chart.addSeries({ 
      name: 'age group 1', 
      type: 'column', 
      color: '#FCC5C0', 
      data:[450, 770, 540, 110, 340, 870,200,500,300,600,100]    
     }); 
     chart.addSeries({ 
      name: 'age group 2', 
      type: 'column', 
      color: '#F768A1', 
      data:[563,234,675,567,234,834,341,415,300,200,100,200,400] 
     }); 
     chart.addSeries({ 
      name: 'age group 3', 
      type: 'column', 
      color: '#AE017E', 
      data:[100,200,300,400,500,100,200,300,400,500] 
     }); 
     chart.addSeries({ 
      name: 'age group 4', 
      type: 'column', 
      color: '#49006A', 
      data:[400,300,200,400,200,300,500,600,100,600,700] 
     }); 
    } else { 
      chart.addSeries({ 
      name: 'total number of learners', 
      type: 'column', 
      color: '#ffcc99', 
      data:[100,0,200,0,300,100,400,100,500,200,500,300]    
     }); 
    } 
});

}）;

來源

2013-10-24 Lavnayadav009

您需要注意所選圖表類型的更改。我建議如下：

var chartType = "line"; 
$("#chartType").change(function() { 
    chartType = $("#chartType option:selected").val(); 
});

您現在可以在圖表代碼中引用變量chartType。

chart.addSeries({ 
      name: '#Active Leaners', 
      type: chartType, 
      color: '#43cd80', 
      data:[100, 200, 300, 400, 100, 200, 100,200,300,100,400,100]

http://jsfiddle.net/bYx9k/

讓您的工作更簡單，我建議把它繪製成圖表的功能代碼。然後，只要有任何選擇/輸入發生變化，您就可以調用該功能。例如：

var chartType = "line"; 
var seriesType = "a"; 
$("#chartType").change(function() { 
    chartType = $("#chartType option:selected").val(); 
    redrawChart(); 
}); 
$(".test").change(function() { 
    seriesType = this.getAttribute("value"); 
    redrawChart(); 
}

來源

2013-10-24 08:00:36 SteveP

您可以簡單地使用series.update()更新series.types。參見：http://jsfiddle.net/zuXDG/

$("#chartType").change(function() { 
    var type = this.value; 
    if(type !== '0') { 
     $(chart.series).each(function(){ 
      this.update({ 
       type: type 
      }, false); 
     }); 
     chart.redraw(); 
    } 
});

來源

2013-10-24 10:50:00

highcharts更改圖表類型使用多個系列的下拉列表

回答

相關問題