highcharts使用下拉为多个系列改变图表类型(highcharts change chart

你好即时通讯在编程该领域的新手，我尝试创建一个图表带有下拉列表的图表类型。我已经试过张贴在这里，不幸的是没有找到一个工作一个与我的代码中的许多解决方案。任何帮助表示赞赏，

这里是JS小提琴链接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:

你需要监视更改到所选的图表类型。我建议是这样的：

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

现在，您可以参考变量在图图表图表的代码。

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

Answer 2:

您可以通过简单地更新series.types series.update() 请参阅： 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();
    }
});