highcharts使用多个系列的下拉列表来更改图表类型 [英] highcharts change chart type using dropdown for multiple series
本文介绍了highcharts使用多个系列的下拉列表来更改图表类型的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
任何帮助赞赏，
这里是js小提琴链接
http://jsfiddle.net/hKGSK/
$（function（）{
var chart = new Highcharts.Chart（{
chart：{
renderTo：'container'，
type：'line'，
title：'please select a类别'
}，
xAxis：{
类别：['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun' 'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec'] //这里我们有一个共同的时间轴（日期）
}
}）;
$（。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（{文本：#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。主动学习者
}）;
} else if（value =='b'）{
chart.addSeries（{
name：'grade1'，
type：'column'，
颜色：'＃7FCDBB'，
数据：[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'，
颜色：'＃FCC5C0'，
数据：[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：'学习者总数'，
类型：'列'，
颜色：'＃ffcc99'
数据：[100,0200,03,100,100,400,100,500,200,500,300]
}）;
}
}）;
}）;
解决方案
您将需要注意对所选图表类型的更改。我建议如下：
var chartType =line;
$（＃chartType）。change（function（）{
chartType = $（＃chartType option：selected）。val（）;
}）;
您现在可以参考图表代码中的变量chartType。
chart.addSeries（{
name：'#Active Leaners'，
type：chartType，
color：'＃43cd80 '，
数据：[100，200，300，400，100，200，100,200,300,100,400,100]
为了使你的工作更简单，我建议把绘制图表的代码放入一个函数中，然后只要任何一个选择/输入发生变化，就可以调用这个函数，如：
var chartType =line;
var seriesType =a;
$（＃chartType）。change（function（）
chartType = $（＃chartType选项：选择）val（）;
redrawChart（）;
}）;
$（ function（）{
seriesType = this.getAttribute（value）;
redrawChart（）;
}
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/
$(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]
});
}
});
});
解决方案
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.
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();
}
这篇关于highcharts使用多个系列的下拉列表来更改图表类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
