highcharts modifier le type de graphique à l'aide de liste déroulante pour plusieurs séries

bonjour je suis un newbie dans ce domaine de la programmation, im essayant de créer un tableau avec une liste déroulante de type de graphique. J'ai déjà essayé de nombreuses solutions posté ici, malheureusement, pas à trouver un travail à mon code.
toute aide appréciée.,

voici le js fiddle lien
http://jsfiddle.net/hKGSK/

$(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]             
}); 
}
});

});

InformationsquelleAutor Lavnayadav009 | 2013-10-24
  1. 1

    Vous aurez besoin de regarder pour la modification du type de diagramme sélectionné. Je suggère quelque chose comme:

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

    Vous pouvez maintenant faire référence à la variable chartType dans votre tableau de code.

     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/

    Pour rendre votre travail plus simple, je suggère de mettre le code qui dessine le graphique dans une fonction. Vous pouvez ensuite appeler cette fonction à chaque fois que les sélections/les entrées des changements. Quelque chose comme:

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

    Vous pouvez simplement mettre à jour la série.types à l'aide de series.update(). Voir: 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();
}
});
    InformationsquelleAutor Paweł Fus