重新绘制AMChart上的下拉选择
ReDraw AMChart on dropdown select
当从下拉菜单中选择一个选项时,重新绘制线形图的最佳方法是什么?你可以看到我有3个变量匹配到我的下拉菜单中的3个选项,但我不知道如何改变dataProvider和重新绘制图表时,我选择了一个不同的选项。
<<h3>视图/h3><select id="selectAccountSelect" class="form-control">
<option id="1" selected="selected" value="1">Account 1</option>
<option id="2" value="2">Account 2</option>
<option id="3" value="3">Account 3</option>
</select>
JS
var account1 = [
{
"date": "2014-01-01",
"acc1": 80,
"acc2": 40
},
{
"date": "2014-02-01",
"acc1": 72,
"acc2": 20
},
{
"date": "2014-03-01",
"acc1": 80,
"acc2": 30
},
{
"date": "2014-06-01",
"acc1": 20,
"acc2": 80
}
];
var account2 = [
{
"date": "2014-02-01",
"acc1": 54,
"acc2": 20
},
{
"date": "2014-04-01",
"acc1": 60,
"acc2": 60
},
{
"date": "2014-05-01",
"acc1": 50,
"acc2": 40
},
{
"date": "2014-06-01",
"acc1": 18,
"acc2": 56
}
];
var account3 = [
{
"date": "2014-01-01",
"acc1": 40,
"acc2": 20
},
{
"date": "2014-02-01",
"acc1": 35,
"acc2": 20
},
{
"date": "2014-03-01",
"acc1": 60,
"acc2": 40
},
{
"date": "2014-04-01",
"acc1": 50,
"acc2": 30
},
{
"date": "2014-05-01",
"acc1": 25,
"acc2": 50
},
{
"date": "2014-06-01",
"acc1": 25,
"acc2": 60
}
];
AmCharts.ready(function () {
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = account1; //Change this variable
chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
chart.categoryField = "date";
chart.dataDateFormat = "YYYY-MM-DD";
chart.autoMargins = false;
chart.marginRight = 0;
chart.marginLeft = 30;
chart.marginBottom = 20;
chart.marginTop = 20;
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "MM"; // our data is daily, so we set minPeriod to DD
categoryAxis.inside = false;
categoryAxis.gridAlpha = 0;
categoryAxis.tickLength = 0;
categoryAxis.axisAlpha = 0;
var valueAxis = new AmCharts.ValueAxis();
valueAxis.dashLength = 1;
valueAxis.axisColor = "#DADADA";
valueAxis.axisAlpha = 1;
chart.addValueAxis(valueAxis);
var graph = new AmCharts.AmGraph();
graph.type = "line";
graph.valueField = "acc1";
graph.lineColor = "#60c6cf";
graph.lineThickness = 3;
graph.bullet = "round";
graph.bulletColor = "#60c6cf";
graph.bulletBorderColor = "#ffffff";
graph.bulletBorderAlpha = 1;
graph.bulletBorderThickness = 3;
graph.bulletSize = 12;
chart.addGraph(graph);
var graph1 = new AmCharts.AmGraph();
graph1.type = "line";
graph1.valueField = "acc2";
graph1.lineColor = "#f35958";
graph1.lineThickness = 3;
graph1.bullet = "round";
graph1.bulletColor = "#f35958";
graph1.bulletBorderColor = "#ffffff";
graph1.bulletBorderAlpha = 1;
graph1.bulletBorderThickness = 3;
graph1.bulletSize = 12;
chart.addGraph(graph1);
var chartCursor = new AmCharts.ChartCursor();
chart.addChartCursor(chartCursor);
chart.write("chartdiv");
});
Try
$("#selectAccountSelect").change(function() {
var selectedVal = $(this).val();
var dataProvider = null;
switch(selectedVal) {
case 1:
dataProvider = account1;
break;
case 2:
dataProvider = account2;
break;
case 3:
dataProvider = account3;
break;
default:
// do something for default case
break;
}
chart.dataProvider = dataProvider;
chart.validateData();
});
相关文章:
- 下拉选择可自动更改第二个下拉选择
- 如何使用jQuery选择下拉列表的值
- jquery点击函数select&取消选择
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 按照选项卡索引的顺序循环一个jQuery选择
- 在动态创建的元素上获取对特定选择器的引用
- AngularJS-在JSON选择器中使用变量名
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 获取选择框的状态
- d3基于用户选择动态更新节点
- 提交后保留下拉选择的值
- JQuery对动态创建的对象进行选择
- 无法在Ionic select中预先选择最后一个选项
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- jQuery自动完成阻止选择后聚焦
- 使用此选项选择父类内部的类
- jQuery最近父级的数据属性选择器
- 遍历类元素数组,并在jquery中选择同级元素
- CKeditor:更改对话框中的默认选择选项
- 重新绘制AMChart上的下拉选择