基于下拉选择更新图表-javascript

我需要根据下拉列表更改来更新图表。 我不知道如何使用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>

这是我的定制，正在尝试

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图书馆链接

非常感谢您的帮助

使用下拉列表时，您应该为每个选项指定一个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>

---

@法希姆-如果你能：

<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>

$("#chartType").change(function (evt) {
    var chartSelection = $("#chartType").val();
    var chart = c3.generate({
        data: {
            rows: data,
            type: chartSelection
        }
    });
});