javascript - highcharts 使用多个系列的下拉菜单更改图表类型

Question

你好我是这个编程领域的新手，我正在尝试创建一个图表，其中包含图表类型的下拉列表。我已经尝试过此处发布的许多解决方案，不幸的是没有找到适用于我的代码的解决方案。 任何帮助表示赞赏。

这是js fiddle 链接 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]             
        }); 
    }
});

});

Answer 1

您可以使用 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();
    }
});