chart.js雷達圖中的動態信息

Question

我在chart.js中創建了雷達圖。如何使用用戶用下拉菜單指定的數字來更新圖表？我爲每個輸入創建了一個變量，如下所示：「spaceScore」，「styleScore」，「scheduleScore」，「supplementScore」。

$(document).ready(function(){ 

    "use strict"; 



new Chart(document.getElementById("radarChart"), { 
    type: 'radar', 
    data: { 
     labels: ["Space", "Style", "Schedule", "Supplement"], 
     datasets: [ 
     { 
      label: "Cognizant Baseline", 
      fill: false, 
      backgroundColor: "rgba(179,181,198,0.2)", 
      borderColor: "rgba(179,181,198,1)", 
      pointBorderColor: "#fff", 
      pointBackgroundColor: "rgba(179,181,198,1)", 
      data: [1,3,1,2] 
     }, { 
      label: "Assessment", 
      fill: true, 
      backgroundColor: "rgba(255,99,132,0.2)", 
      borderColor: "rgba(255,99,132,1)", 
      pointBorderColor: "#fff", 
      pointBackgroundColor: "rgba(255,99,132,1)", 
      data: ['spaceScore','styleScore','scheduleScore','supplementScore'] 
     }, { 
      label: "Learner Centricity", 
      fill: true, 
      backgroundColor: "rgba(114, 205, 244,0.2)", 
      borderColor: "rgba(114, 205, 244,1)", 
      pointBorderColor: "#fff", 
      pointBackgroundColor: "rgba(114, 205, 244,1)", 
      data: [2,2,2,1] 
     } 
     ] 
    }, 


    options: { 
     title: { 
     display: false, 
     }, 
     legend: { 
      display: false 
     }, 
     tooltips: { 
      enabled: false 
     } 
    } 

}); 



function getData(){ 
     var radarChart = document.getElementById("radarChart"); 
     var spaceScore = document.getElementById('spaceScore').value(); 
     var styleScore = document.getElementById('styleScore').value; 
     var scheduleScore = document.getElementById('scheduleScore').value; 
     var supplementScore = document.getElementById('supplementScore').value; 

     radarChart.update; 
}  


}); 

Answer 1

我添加了4個數字輸入作爲更新值的接口。我給他們的值從0到3，以適應您的需求。我還添加了一個更新按鈕，以便更新僅在您點擊時纔會發生。

如果您想特別下拉式輸入，只需用傳統的<select>標籤替換數字輸入，<options>匹配可能的值。

要在圖表上執行實際更新，您需要先覆蓋數據集中的舊數據，然後調用與radarChart.update()重新渲染char-canvas。按照內聯代碼註釋瞭解代碼中發生的情況。

$(document).ready(function() { 
 
    "use strict"; 
 

 
    // hold a radarChart reference for future updates 
 
    var radarChart = new Chart(document.getElementById("radarChart"), { 
 
    type: 'radar', 
 
    data: { 
 
     labels: ["Space", "Style", "Schedule", "Supplement"], 
 
     datasets: [{ 
 
     label: "Cognizant Baseline", 
 
     fill: false, 
 
     backgroundColor: "rgba(179,181,198,0.2)", 
 
     borderColor: "rgba(179,181,198,1)", 
 
     pointBorderColor: "#fff", 
 
     pointBackgroundColor: "rgba(179,181,198,1)", 
 
     data: [1, 3, 1, 2] 
 
     }, { 
 
     label: "Assessment", 
 
     fill: true, 
 
     backgroundColor: "rgba(255,99,132,0.2)", 
 
     borderColor: "rgba(255,99,132,1)", 
 
     pointBorderColor: "#fff", 
 
     pointBackgroundColor: "rgba(255,99,132,1)", 
 
     data: ['spaceScore', 'styleScore', 'scheduleScore', 'supplementScore'] 
 
     }, { 
 
     label: "Learner Centricity", 
 
     fill: true, 
 
     backgroundColor: "rgba(114, 205, 244,0.2)", 
 
     borderColor: "rgba(114, 205, 244,1)", 
 
     pointBorderColor: "#fff", 
 
     pointBackgroundColor: "rgba(114, 205, 244,1)", 
 
     data: [2, 2, 2, 1] 
 
     }] 
 
    }, 
 

 

 
    options: { 
 
     title: { 
 
     display: false, 
 
     }, 
 
     legend: { 
 
     display: false 
 
     }, 
 
     tooltips: { 
 
     enabled: false 
 
     } 
 
    } 
 

 
    }); 
 

 
    // click handler of the update button 
 
    $('#update').on('click', function() { 
 
     getData(); 
 
    }); 
 

 
    function getData() { 
 
    // get new user-selected values 
 
    var spaceScore = document.getElementById('spaceScore').value; 
 
    var styleScore = document.getElementById('styleScore').value; 
 
    var scheduleScore = document.getElementById('scheduleScore').value; 
 
    var supplementScore = document.getElementById('supplementScore').value; 
 
    // update chart dataset with new values 
 
    radarChart.data.datasets[0].data[0] = spaceScore; 
 
    radarChart.data.datasets[0].data[1] = styleScore; 
 
    radarChart.data.datasets[0].data[2] = scheduleScore; 
 
    radarChart.data.datasets[0].data[3] = supplementScore; 
 
    // redraw chart 
 
    radarChart.update(); 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="inputs"> 
 
    <input id="spaceScore" type="number" min="0" max="3" value="1" /> 
 
    <input id="styleScore" type="number" min="0" max="3" value="3" /> 
 
    <input id="scheduleScore" type="number" min="0" max="3" value="1" /> 
 
    <input id="supplementScore" type="number" min="0" max="3" value="2" /> 
 
    <button id="update" type="button">Update</button> 
 
</div> 
 
<canvas id="radarChart" />