时间戳

首页 > 解决方案 > 如何将输入值传递给我的条形图

php - 如何将输入值传递给我的条形图

问题描述

我有 3 个输入字段和一个提交按钮我只想在按下提交按钮时根据输入值显示条形图

我测试警报值，我可以得到它

这是html


 <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
              <div class="form-group">
                <label for="exampleInputEmail1">Enter Value</label>
                <input type="text" class="form-control" id="value1" name="value1" placeholder="Enter value">
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Enter Value</label>
                <input type="text" class="form-control" id="value2" name="value2" placeholder="Enter value">
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Enter Value</label>
                <input type="text" class="form-control" id="value3" name="value3" placeholder="Enter value">
              </div>
              <button type="submit" class="btn btn-primary" onclick="getVal()">Submit</button>
            </form>

继承人的JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
      function getVal()
      {
        var val1 = document.getElementById('value1').value;
        var val2 = document.getElementById('value2').value;
        var val3 = document.getElementById('value3').value;
      }
      var chart = new Chart(ctx, {
          // The type of chart we want to create
          type: 'bar',

          // The data for our dataset
          data: {
              labels: ['value1', 'value2', 'value3'],
              datasets: [{
                  label: 'My First dataset',
                  backgroundColor: 'rgb(255, 99, 132)',
                  borderColor: 'rgb(255, 99, 132)',
                  data: [0, 10, 2, 20, 30, 45] <------ How can i pass val1,val2,val3 here data:[] is an object type

              }]
          },
      });

没有错误，但也没有结果我只想在数据上传递 val1,val2,va3:[0,10,2,20]

标签： phpchart.js

解决方案

您需要将 val1、val2 和 val3 变量声明为函数外部的全局变量。目前 val1 val2 和 val3 仅在 getVal() 函数中可用。

更好的方法是创建一个数组，并将值添加到其中，如下所示：

var values = [];
values.push(document.getElementById('value1').value);
values.push(document.getElementById('value2').value);
values.push(document.getElementById('value3').value);
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'bar',
    // The data for our dataset
    data: {
        labels: ['value1', 'value2', 'value3'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: values
        }]
    },
});

推荐阅读