C3.js : Jquery 使用 2 个下拉列表更改方法

Question

我对 "type" 字段有疑问。

对于选择的值 "dataDaily" 我有四个类型选项："spline"、"area"、"line"、"bar".

那么我应该怎么做才能让 "type" 字段有下拉菜单。

请提出一些解决方案。

Html:

 <html>
 <select id="DataType">
 <option value="dataDaily">Daily</option>
 <option value="dataWeekly">Weekly</option>
 <option value="dataMonthly">Monthly</option>
 </select>

 <select id="chartType">
<option value="spline">spline chart</option>
<option value="area">area chart</option>
<option value="line">line chart</option>
<option value="bar">bar chart</option>
</select>
</html>

JS:

$(function () {

var chart = c3.generate({
bindto:'#chart',
data: {
    x : 'x',
    columns: dataDaily,

    type: 'spline',
    labels:true
},
axis: {
    x: {
        type: 'category' // this needed to load string x value
    }
}
 });


 $("#DataType").change(function (evt) {
var timeSelection = eval( $("#DataType").val());

var chart = c3.generate({
bindto:'#chart',
data: {
    x : 'x',
    columns: timeSelection,

    type: 'spline',
    labels:true

},
axis: {
    x: {
        type: 'category' // this needed to load string x value
    }
}
  });
  });

Answer 1

您需要使用闭包中的一些变量来跟踪更新，并在更新图表（currentData、currentType）时使用它们：

$(function () {
    var currentData = dataDaily;
    var currentType = 'spline';

    var chart = c3.generate({
    bindto:'#chart',
    data: {
        x : 'x',
        columns: currentData,

        type: currentType,
        labels:true
    },
    axis: {
        x: {
            type: 'category' // this needed to load string x value
        }
    }
     });


    $("#DataType").change(function (evt) {
        var timeSelection = eval( $("#DataType").val());
        currentData = timeSelection;

        var chart = c3.generate({
        bindto:'#chart',
        data: {
            x : 'x',
            columns: currentData,

            type: currentType,
            labels:true

        },
        axis: {
            x: {
                type: 'category' // this needed to load string x value
            }
        }
    });

    $("#chartType").change(function (evt) {
        var chartSelection = $("#chartType").val();
        currentType = chartSelection;
        var chart = c3.generate({
            bindto:'#chart',
            data: {
                x : 'x',
                columns: currentData,

                type: currentType,
                labels:true

            },
            axis: {
                x: {
                    type: 'category' // this needed to load string x value
                }
            }
    });
});

C3.js : Jquery 使用 2 个下拉列表更改方法

C3.js : Jquery change method with 2 dropdown list

html

javascript

jquery

d3.js

c3.js