2014-11-08 64 views
0

我需要根据下拉更改更新图表。 我不知道如何在JavaScript或jQuery中做。基于下拉选择更新图表 - javascript

我创建拨弄来解释我的情况

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

任何帮助表示赞赏

回答

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

谢谢你,它就像一个魅力! – rakesh 2014-11-09 06:24:29

+0

@ Faheem - 请帮助我,如果你可以:http://stackoverflow.com/questions/26827273/update-array-values-to-chart-based-on-timeframe-javascript – rakesh 2014-11-09 10:52:12

相关问题