Question

我有＆＃34;类型＆＃34;领域。

对于所选的值＆＃34; dataDaily＆＃34;我有四种类型选项：＆＃34; spline＆＃34;，＆＃34; area＆＃34;，＆＃34; line＆＃34;，＆＃34; bar＆＃34;。

那么我应该怎样做以便为＆＃34;类型＆＃34;字段。

请提出一些解决方案。

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：带有2个下拉列表的Jquery更改方法

1 个答案: