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

Update chart based on dropdown selection - javascript

本文关键字:-javascript 更新 于下拉 选择      更新时间:2023-09-26

我需要根据下拉更改更新图表。我不知道如何使用javascript或jquery。

我创建了fiddle来解释我的情况

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

如有任何帮助,我们将不胜感激。

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