如何将用户输入的值添加到我的chart.js线图？

Question

我想添加一个新的X和y值到我的Chart.js线图中，但不断收到错误。我尝试了很多不同的方式，但似乎无法从用户输入动态更新。这可能吗？我错过了什么？

我试图在图表的最后添加新的用户数据。 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 and yValue变量必须是数字，而不是字符串。

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/