Question

你好我是这个编程领域的新手，我试图创建一个带有下拉列表到图表类型的图表。我已经在这里发布了很多解决方案，遗憾的是没有找到我的代码。任何帮助赞赏。，

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

Answer 2

您需要注意所选图表类型的更改。我建议像：

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

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

2 个答案: