ユーザーが入力した値を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およびyValue varsは文字列ではなく数字でなければなりません。

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/