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的radarChart.update()渲染。 遵循內聯代碼注釋，以了解代碼中發生的事情。

 $(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" />