>

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>


여기 자바 스크립트가 있습니다

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]

  • 답변 # 1

    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
            }]
        },
    });
    
    

관련 자료

  • 이전 android - java hashmap 오류 - javalangclasscastexception : javalanginteger를 javalangstring으로 캐스트 할 수 없습니다
  • 다음 typescript - 가져 오기 및 창 사용을위한 컴파일 내보내기