我需要根据下拉列表的变化更新图表。 我不知道如何在 javascript 或 jquery 中执行操作。
我创建了 fiddle 来解释我的情况
<强> http://jsfiddle.net/sELst/25/
这是html
<select id="chartType">
<option>bar chart</option>
<option>area chart</option>
<option>line chart</option>
<option>spline chart</option>
</select>
<div id="chart"></div>
JS
var chart = c3.generate({
data: {
rows: [
['data4', 'data2', 'data3'],
[90, 120, 300],
[40, 160, 240],
[50, 200, 290],
[120, 160, 230],
[80, 130, 300],
[90, 220, 320]
],
type: 'bar'
}
});
这是我的定制,正在尝试
var currentChart = 0;
var charts = [{
type: 'line',
data: 'data4'
}, {
type: 'area',
data: 'data2'
}, {
type: 'spline',
data: 'data3'
}];
$(function () {
$("#chartType").change(function (evt) {
var chartSelection = $("#chartType").val();
$('#chart').hide().filter(charts + chartSelection).show();
});
});
详细说明
我正在处理 c3.js 图表
在c3中,有4种图表
- 条形图
- 面积图
- 样条图
- 折线图
每当用户更改下拉列表或选择其他图表时,我需要更新图表。
C3库链接
<强> http://c3js.org/samples/chart_combination.html
感谢任何帮助
最佳答案
<强> Fiddle
使用下拉菜单时,您应该为每个选项指定一个 value 属性,这是 .val()
稍后将为我们返回的值,我们将使用该值来指定我们的图表类型想要。
<select id="chartType">
<option value="bar">bar chart</option>
<option value="area">area chart</option>
<option value="line">line chart</option>
<option value="spline">spline chart</option>
</select>
通过我们的 EventListener
,我们可以监听下拉列表中的选择,当选择某些内容时,我们会重新生成该类型的图表。
$("#chartType").change(function (evt) {
var chartSelection = $("#chartType").val();
var chart = c3.generate({
data: {
rows: data,
type: chartSelection
}
});
});
关于javascript - 根据下拉选择更新图表 - javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26821848/