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