我需要根据下拉列表更改来更新图表。 我不知道如何在javascript或jquery中做。
我创造了小提琴来解释我的情况
这是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
感谢任何帮助
答案 0 :(得分:1)
<强> Fiddle 强>
使用下拉菜单时,您应该为每个选项指定一个值属性,这是.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
}
});
});