Question

我正在尝试创建一个简单的表单来收集用户的输入，然后使用chartjs在条形图中显示用户数据。以下是我目前的javascript代码。我希望testValue1，testValue2，testValue3和testValue4显示为我的数据。对我所缺少的任何帮助都将不胜感激。

function displayGraph () {
    let testOutput = document.getElementById("welcome");
    let testValue1 = document.getElementById("test1");
    let testValue2 = document.getElementById("test2");
    let testValue3 = document.getElementById("test3");
    let testValue4 = document.getElementById("test4");
}

let barChart = new Chart(rateOfReturn, {
        type: 'bar',
        data: {
            labels: ["Rate of Return", "Fee #1", "Fee #2", "Fee #3"],
            datasets: [{
                label: 'Balance by Year',
                data: [],
                backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
        }]
    },
});

Answer 1

我不确定你的实施。如果您尝试从输入中获取值到图表中。赢了这样的工作吗？

<canvas id="myChart" width="400" height="400"></canvas>
<script>
    var ctx = document.getElementById("myChart").getContext('2d');

    var testOutput = document.getElementById("welcome").value;

    var testValue1 = document.getElementById("test1").value;
    var testValue2 = document.getElementById("test2").value;
    var testValue3 = document.getElementById("test3").value;
    var testValue4 = document.getElementById("test4").value;
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [testValue1, testValue2, testValue3, testValue4],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
</script>

参考：http://www.chartjs.org/docs/latest/

Answer 2

也许你可以传递数据而不是空数组

datasets: [{
            label: 'Balance by Year',
            data: [], // Empty Array
            backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
    }]

您可以先关注最新的条形图示例，然后自行复制。 http://www.chartjs.org/docs/latest/charts/bar.html

Answer 3

您在这里。这行得通。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>SimpleAdd</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" charset="utf-8"></script>

</head>

<body>

  <form>
    Test:<br>
    <input id="test1" type="text">
    <input type="button" value="Add data" onclick="adddata()">
  </form>

  <canvas id="myChart"></canvas>
  <script type="text/javascript">


    var ctx = document.getElementById("myChart").getContext('2d');

    function adddata() {
      let test1 = document.getElementById("test1").value;

    //  myChart.data.labels[1] = testName1;
      myChart.data.datasets[0].data[0] = test1;
      myChart.update();
    }

    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ["Red"],
        datasets: [{
          label: '# of Votes',
          data: [test1],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)'
          ],
          borderColor: [
            'rgba(255,99,132,1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  </script>
</body>

</html>

显示简单html表单中的数据以显示在chartjs中

3 个答案: