javascript highcharts 使用下拉列表更改多个系列的图表类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19557984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
highcharts change chart type using dropdown for multiple series
提问by Lavanyadav009
hello im a newbie in this field of programming, im trying to create a chart with a drop down list to chart type. I've already tried many solutions posted here, unfortunately not finding a working one with my code. any help appreciated.,
你好，我是这个编程领域的新手，我正在尝试使用下拉列表创建图表类型的图表。我已经尝试过这里发布的许多解决方案，不幸的是没有找到适合我的代码的解决方案。任何帮助表示赞赏。，
here is the js fiddle link http://jsfiddle.net/hKGSK/
这是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]
});
}
});
});
});
采纳答案by SteveP
You will need to watch for changes to the selected chart type. I suggest something like:
您需要注意所选图表类型的变化。我建议如下：
var chartType = "line";
$("#chartType").change(function() {
chartType = $("#chartType option:selected").val();
});
You can now refer to the variable chartType in your chart code.
您现在可以在图表代码中引用变量 chartType。
chart.addSeries({
name: '#Active Leaners',
type: chartType,
color: '#43cd80',
data:[100, 200, 300, 400, 100, 200, 100,200,300,100,400,100]
To make your job simpler, I suggest putting the code which draws the chart into a function. You can then call this function whenever any of the selections/inputs changes. Something like:
为了使您的工作更简单，我建议将绘制图表的代码放入一个函数中。然后，您可以在任何选择/输入更改时调用此函数。就像是：
var chartType = "line";
var seriesType = "a";
$("#chartType").change(function() {
chartType = $("#chartType option:selected").val();
redrawChart();
});
$(".test").change(function() {
seriesType = this.getAttribute("value");
redrawChart();
}
回答by Pawe? Fus
You can simply update series.types using series.update(). See: http://jsfiddle.net/zuXDG/
您可以简单地使用更新 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();
}
});
