我正在嘗試使用選擇框中給出的 id 更改圖表資料,為此我使用了 onChange 事件:
<label for="patientId">Choose a patient:</label>
<select name="patient" id="patient" onchange="myFunction(this.value)">
{% for item in patientId %}
<option value="{{item}}">
{{item}}
</option>
{% endfor %}
</select>
<canvas id="weeklyChart"></canvas>
圖表資料是一個看起來像這樣的錯誤物件:
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: {{ hourArray|safe}},
datasets: [{
label: "Value",
lineTension: 0.3,
backgroundColor: "rgba(78, 115, 223, 0.05)",
borderColor: "rgba(78, 115, 223, 1)",
pointRadius: 3,
pointBackgroundColor: "rgba(78, 115, 223, 1)",
pointBorderColor: "rgba(78, 115, 223, 1)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
pointHoverBorderColor: "rgba(78, 115, 223, 1)",
pointHitRadius: 10,
pointBorderWidth: 2,
data: {{ glucoseArray|safe}},
}],
},
}
在 onChange 函式中,我有以下邏輯:
function myFunction(val) {
let hourArray = [];
let glucoseArray = [];
for (let i = 0; i < deviceList.length; i ) {
if (deviceList[i].patientId == val) {
hourArray.push(deviceList[i].hour);
glucoseArray.push(deviceList[i].glucoseValue);
}
}
myLineChart.data.datasets[0].data = glucoseArray;
myLineChart.data.labels = hourArray;
console.log(myLineChart.data.datasets[0].data);
console.log(myLineChart.data.labels);
}
在 console.log() 我有我需要的資料,但頁面上沒有任何反應。我能做什么,所以我的函式將為圖表呈現正確的資料。
uj5u.com熱心網友回復:
您必須更新您添加的資料。對于那個用途myLineChart.update()
對于沒有影片的更改資料,您可以none使用模式
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/416443.html
標籤:
上一篇:為什么只有當字串來自d3.format函式時,將負字串轉換為數字( "-2.333")才會回傳NaN?
下一篇:使用CSS創建進度條(凹形)
