C3.js : 2 드롭 다운 목록을 사용하는 Jquery 변경 방법

"유형"필드에 문제가 있습니다.C3.js : 2 드롭 다운 목록을 사용하는 Jquery 변경 방법

"dataDaily"값에 대해 "spline", "area", "line", "bar"의 네 가지 옵션이 있습니다.

그래서 "유형"필드에 드롭 다운을 사용하려면 어떻게해야합니까? 참고로

몇 가지 솔루션을 제안 해주십시오.

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 변경 방법

답변

관련 문제