0
我想添加一個新的X和y值到我的Chart.js線圖中,但不斷收到錯誤。我嘗試了很多不同的方式,但似乎無法從用戶輸入動態更新。這可能嗎?我錯過了什麼?如何將用戶輸入的值添加到我的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" />
非常感謝Save @ A.Iglesias,咖啡因太多,睡眠不足! –
我的榮幸!祝你有美好的一天,快樂的編碼! –