Question

我在chart.js中创建了雷达图表。如何使用用户在下拉菜单中指定的数字更新图表？我为每个输入创建了一个变量，如下所示：“spaceScore”，“styleScore”，“scheduleScore”，“suppleScore”。

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

chart.js雷达图中的动态信息

1 个答案: