사용자 입력 값을 chart.js 선 그래프에 어떻게 추가합니까?

Question

Chart.js 선 그래프에 새로운 X 값과 Y 값을 추가하려고하지만 계속 오류가 발생합니다. 여러 가지 방법을 시도했지만 사용자 입력에서 동적으로 업데이트 할 수 없습니다. 이것이 가능한가? 내가 뭘 놓치고 있니?

차트 끝에 새 사용자 데이터를 추가하려고합니다. 결국 X 축은 날짜가됩니다.

$('#update').click(function() { 
 

 
    var xValue = $('#xValue').val; 
 
    var yValue = $('#yValue').val; 
 

 
    myChart.data.datasets[0].data.push(xValue, yValue); 
 
    myChart.update(); 
 
}); 
 

 

 
var ctx = document.getElementById("myChart").getContext('2d'); 
 

 
var myChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
    datasets: [{ 
 
     label: "Body Fat % Progress", 
 
     data: [{ 
 
      x: 1, 
 
      y: 1 
 
     }, 
 
     { 
 
      x: 2, 
 
      y: 2 
 
     }, 
 
     { 
 
      x: 3, 
 
      y: 5 
 
     }, 
 
     { 
 
      x: 4, 
 
      y: 0 
 
     }, 
 
     { 
 
      x: 5, 
 
      y: 2 
 
     }, 
 

 

 
     ], 
 
     backgroundColor: ['rgba(255, 255, 255, 0.2)'], 
 
     borderColor: ['rgba(255, 255, 255, 1)'], 
 
     borderWidth: 1 
 
    }] 
 
    }, 
 

 
    options: { 
 
    legend: { 
 
     labels: { 
 
     // This more specific font property overrides the global property 
 
     fontColor: 'white' 
 
     } 
 
    }, 
 

 
    scales: { 
 

 
     xAxes: [{ 
 
     type: 'time', 
 
     time: { 
 
      displayFormats: { 
 
      quarter: 'MMM D' 
 
      } 
 
     }, 
 
     display: true, 
 
     gridLines: { 
 

 
      display: true, 
 
      color: 'rgba(255, 255, 255, 0.1)', 
 

 

 
     }, 
 
     scaleLabel: { 
 
      display: true, 
 
      labelString: 'Date', 
 
      fontColor: 'white' 
 
     }, 
 
     ticks: { 
 
      beginAtZero: 'false', 
 
      fontColor: 'white' 
 
     } 
 
     }], 
 

 
     yAxes: [{ 
 
     display: true, 
 
     color: 'white', 
 
     gridLines: { 
 
      display: true, 
 
      color: 'rgba(255, 255, 255, 0.1)' 
 
     }, 
 
     scaleLabel: { 
 
      display: true, 
 
      labelString: 'Body Fat %', 
 
      fontColor: 'white' 
 
     }, 
 
     ticks: { 
 
      beginAtZero: true, 
 
      fontColor: 'white' 
 
     } 
 
     }] 
 

 
    }, 
 

 
    showAllTooltips: true, 
 

 
    tooltips: { 
 

 
     custom: function(tooltip) { 
 
     if (!tooltip) return; 
 

 
     // disable displaying the color box; 
 
     tooltip.displayColors = false; 
 
     }, 
 

 
     callbacks: { 
 
     // use label callback to return the desired label 
 
     label: function(tooltipItem, data) { 
 
      return tooltipItem.yLabel + '%'; 
 
     }, 
 
     title: function(tooltipItem, dat) { 
 
      return 'Body Fat:'; 
 
     } 
 

 
     } 
 

 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script> 
 

 
<div class="chart-container"> 
 

 
    <canvas id="myChart" width="400" height="400"></canvas> 
 

 
</div> 
 

 
<input type="number" name="xValue" placeholder="X Value" id="xValue" /> 
 
<input type="number" name="yValue" placeholder="Y Value" id="YValue" /> 
 
<input type="submit" id="update" value="Update" />

Answer 1

내가 찾은 몇 가지 :

1. 당신은 HTML 코드에 오타가 있습니다. id="yValue" 대신 id="YValue"이 있습니다.

2. .val을 입력하고 .val()이어야합니다.

3. xValue 및 yValuevars는 문자열이 아니라 숫자 여야합니다.

4. 새 데이터를 데이터 집합에 추가 할 때 개체가되어야합니다. 함께 최선을 다하는

...

HTML :

<div class="chart-container"> 
    <canvas id="myChart" width="400" height="400"></canvas> 
</div> 

<input type="number" name="xValue" placeholder="X Value" id="xValue" /> 
<input type="number" name="yValue" placeholder="Y Value" id="yValue" /> 
<input type="submit" id="update" value="Update" /> 

JQUERY : 당신이 바이올린 예를 여기

$('#update').click(function() { 

    var xValue = parseFloat($('#xValue').val()); 
    var yValue = parseFloat($('#yValue').val()); 

    myChart.data.datasets[0].data.push({ x: xValue, y: yValue }); 
    myChart.update(); 
}); 

... https://fiddle.jshell.net/rigobauer/ztsafu8w/