基於下拉選擇更新圖表 - 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

Fiddle

當下拉菜單，你應該給每一個選項的值屬性的工作，這就是價值.val()稍後將返回給我們，我們將使用它pecify我們想要的圖表類型。

<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 
     } 
    }); 
});