C3.js：2つのドロップダウンリストを使用したJqueryの変更方法

"type"フィールドに問題があります。C3.js：2つのドロップダウンリストを使用したJqueryの変更方法

"dataDaily"で選択した値には、「スプライン」、「領域」、「線」、「棒」の4つのオプションがあります。

「タイプ」フィールドのドロップダウンを行うにはどうすればよいですか。参考のため

いくつかのソリューションを提案してください。

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：あなたのクロージャ内のいくつかの変数とアップデートを追跡し、チャート（CURRENTDATA、currentType）を更新するときにそれらを使用する必要が

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

出典

2016-07-19 20prj

：

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

出典

2016-07-19 23:21:08 algorithmicMoose

ありがとうございます。:) – 20prj

C3.js：2つのドロップダウンリストを使用したJqueryの変更方法

答えて

関連する問題