동적 인 JavaScript 코드 적용

Question

저는 Jquery에서 새로운 기능을하고 있습니다. Chart.Js를 사용하여 데이터 및 AJAX 호출을 렌더링합니다.

드롭 다운 버튼을 사용하여 레이다 차트를 업데이트하는 스크립트를 만들었습니다. 목표는 다음과 같습니다. 각 사용자는 팀의 일부이며 차트에서 렌더링하는 일부 데이터가 있습니다. 그래서 fixed_array를 사용하는 차트에 고정 된 데이터가 있습니다. 그러면 사용자는 드롭 다운 버튼을 사용하여 팀의 다른 멤버와 현재 멤버를 비교할 수 있습니다.

해당 코드로 정적 데이터로 처리 할 수 ​​있지만 동적으로 만드는 방법을 모르겠다. 예를 들어 난 형태 {[data_array] USER_ID}에서 양 팀 데이터를 가져 이런 경우에서 ID의 정수를 반환

{6: [81, 68, 71, 71, 67, -72], 7: [79, 77, 86, 86, 59, -71], 8: [67, 71, 68, 68, 85, -66]} 

및 CURRENT_USER = data.current_user와 CURRENT_USER 자료 제

<script type="text/javascript"> 
    $(document).ready(function() { 
     // Different arrays for the different data 
     var array = []; 
     array["raphael"] = [90, 20, 80, 50, 34]; 
     array["fraxool"] = [89, 12, 68, 89, 90]; 
     array["johnny"] = [78, 89, 1, 90, 80]; 

     // Default value 
     var fixed_array = [20, 12, 78, 50, 90]; 

     // Chart config 
     var color = Chart.helpers.color; 
     var config = { 
      type: 'radar', 
      data: { 
       labels: [["label1"], "label2", "label3", "label4", "label5"], 
       datasets: [{ 
        label: "Bugsy Bug 1", 
        backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(), 
        borderColor: window.chartColors.red, 
        pointBackgroundColor: window.chartColors.red, 
        data: [] 
       }, { 
        label: "Bugsy Bug 2", 
        backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(), 
        borderColor: window.chartColors.blue, 
        pointBackgroundColor: window.chartColors.blue, 
        data: fixed_array 
       }] 
      }, 
      options: { 
       legend: { 
        position: 'top', 
        display: false 
       }, 
       title: { 
        display: false, 
        text: 'Fiverr Chart' 
       }, 
       scale: { 
        ticks: { 
         beginAtZero: true 
        }, 
        pointLabels: { 
         fontSize: 10, 
         lineHeight: 2 
        } 
       } 
      } 
     }; 

     var mainChart = new Chart(document.getElementById("canvas"), config); 
     // Event for the select 
     $(".pick-chart").change(function (e) { 
      e.preventDefault(); 
      var val = $(this).val(); 
      if (val != 0) { 
       config.data.datasets[0].data = array[val]; 
      } else { 
       config.data.datasets[0].data = []; 
      } 
      mainChart.update(); 
     }); 
    }); 
</script> 

하지만 내 실제 응용 프로그램을 사용하여 데이터를 받고 AJAX :

나는 다음과 같이 차트를 테스트하기 위해 별도의 파일에 시도했다 23,516,

$.ajax({ 
    method: "GET", 
    url: endpoint, 
    success: function(data){ 
    console.log(data) 
    //Labels comming from wevsite.views// 

    info_array = data.info_array 
    current_user = data.current_user 

</script> 

는 지금 info_array의 출력이 너무 {6: [81, 68, 71, 71, 67, -72], 7: [79, 77, 86, 86, 59, -71], 8: [67, 71, 68, 68, 85, -66]}

이다

{USER_ID : 데이터]}

및 CURRENT_USER 출력 : 어떤 적응할 것이다 동적 데이터를 사용하도록 적응하고자 6 팀의 크기

누군가 그것을 알아낼 수 있도록 도와 줄 수 있습니까?

편집 코드 V2 : (각각의 옵션의 값의 USER_ID가)

<select name="pick-chart" class="pick-chart"> 
    <option value="6">Raphael</option> 
    ... 
</select> 

당신은 무언가에 pick-chart.change 기능을 다시 작성할 수 :

<div class="col graph-info"> 

      <div class="card"> 
       <h5 class="card-header text-center bg-dark text-white">Information processing</h5> 
       <div class="card-body"> 
       <div class="dropdown-container"> 
         <form> 
          <select id="pick-chart" class="form-control pick-chart"> 
           <option value="0">Compare with</option> 
         {% for i in team_list_pop %} 
         <option value="{{i.id}}">{{i.first_name}} {{i.last_name}}</option> 
        {% endfor %} 
          </select> 
         </form> 
        </div> 

       <canvas id="info_process"></canvas> 
       </div> 
      </div> 
<script> 
var endpoint = 'api/chart/data' 


$.ajax({ 
    method: "GET", 
    url: endpoint, 
    success: function(data){ 
    console.log(data) 
    //Labels comming from wevsite.views// 
    complete_label = data.complete_label, 
    processing_information_label = data.processing_information_label, 
    motivation_label = data.motivation_label, 
    action_label = data.action_label, 
    other_data_label = data.other_data_label, 

    //Data comming from wevsite.views// 

    team_name_list2 = data.team_name_list2 
    info_array = data.info_array 
    current_user = data.current_user 
    team_list_id = data.team_list_id 

    fixed_array = info_array[current_user] 

    function random_color(){ 
     var color = 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256))+ ',' + 0.2 + ')'; 
    return color 
    } 


    //ctx// 

    var ctx2 = document.getElementById("info_process").getContext('2d'); 



    //graph 2// 
    var info_process = new Chart(ctx2,{ 
     type: 'radar', 
     data: { 
      labels: processing_information_label, 
      datasets:[{ 
        data: fixed_array, //processing_information_data, 
        backgroundColor: random_color() 
         }, 
         { 

         backgroundColor: random_color(), 
         data: [] 
         }] 
      }, 
     options: { 
      legend: { 
       position: 'top', 
       display: false 
      }, 
      scale: { 
        display: true, 
        ticks: { 
         beginAtZero: true, 
          } 
        }, 
      responsive:true, 
      maintainAspectRatio: true, 
       } 
     }); 
     //end graph 2// 


$(".pick-chart").change(function (e) { 
    e.preventDefault(); 
    var val = $(this).val(); 
    if (val != 0) { 
     $.ajax({ 
      method: "GET", 
      url: endpoint, 
      success: function(data){ 
       console.log(data) 
       //Labels coming from website.views// 

       info_array = data.info_array 
       current_user = data.current_user 
       config.data.datasets[0].data = info_array[val]; 
       config.data.datasets[1].data = info_array[current_user]; 
       mainChart.update(); 
      } 
     }); 
    } else { 
     config.data.datasets[0].data = []; 
    } 
    mainChart.update(); 
}); 

} 
}) 


</script> 

Answer 1

당신과 같은 당신의 드롭 다운 상자를 포맷하면 like :

$(".pick-chart").change(function (e) { 
    e.preventDefault(); 
    var val = $(this).val(); 
    if (val != 0) { 
     $.ajax({ 
      method: "GET", 
      url: endpoint, 
      success: function(data){ 
       console.log(data) 
       //Labels coming from website.views// 

       info_array = data.info_array 
       current_user = data.current_user 
       config.data.datasets[0].data = info_array[val]; 
       config.data.datasets[1].data = info_array[current_user]; 
       mainChart.update(); 
      } 
     }); 
    } else { 
     config.data.datasets[0].data = []; 
    } 
    mainChart.update(); 
}); 

데이터가 실제로 동적이며 chan 일 수 있다고 가정합니다. 사용자가 귀하의 페이지에 머무르는 동안 또한 고정 데이터처럼 데이터 세트 1의 (user_id 여야 함)을 데이터 세트 0의 선택된 다른 사용자와 비교하려고한다고 가정합니다.