根據下拉菜單選擇更新圖表-JavaScript

Question

我需要根據下拉更改來更新圖表。 我不知道該怎么做在javascript或jquery中。

我制造了小提琴來解釋我的情況

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種圖表

1. 條形圖
2. 面積圖
3. 樣條圖
4. 折線圖

每當用戶更改下拉列表或選擇其他圖表時，我都需要更新圖表。

C3庫鏈接

http://c3js.org/samples/chart_combination.html

任何幫助表示贊賞

Answer 1

小提琴

使用下拉菜單時，應為每個選項提供一個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 ，在下拉列表中EventListener選擇內容，並在選定內容后重新生成該類型的圖表。

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