我现在面临的问题，我不能解决自己经过几个小时的挖掘。我画图表使用chart js库。数据集是由客户端通过文本输入字段与oninput行动提供。oninput行动运行函数，这是做一些数学，准备数据集和更新图表。它是完美的工作。但我还需要绘制一个自定义文本（基于提供的数据）在图表画布上。文本在画布上可见，但在用户输入一些数据后，更新会删除自定义文本（这是很好的逻辑）。不知道我该如何处理它。
HTML文件：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js" type="text/javascript"></script>
<script src="js/someMaths.js" type="text/javascript"></script>
</head>
<body>
<input type="text" id="progress" oninput="someMaths()">
<canvas id="testChart"></canvas>
</body>
<script src="js/myChart.js" type="text/javascript"></script>
</html>someMaths.js
function someMaths() {
// reading inputs value and doing some maths, preparing datasets, than...
pushData(newDatasets);
}
function pushData(newDatasets) {
let i = 0;
chart.data.datasets.forEach((dataset) => {
dataset.data = newDatasets[i];
i++;
});
chart.update();
// I was trying here, after update to run function with canvas.fillText(), but it didnt worked
}和我的图表. js
let canvas = document.getElementById('testChart').getContext('2d');
const data = {
datasets: [{
// some options
}, {
// some options
}, {
// some options
}]
}
const options = {
type: 'line',
data: data,
options: {
// some options
}
}
let chart = new Chart(canvas, options);这就是它的构造方式，从这里无关紧要的代码中阉割。它按预期工作，直到我想在每一次更新后在画布上绘制文本。
不知道如何实现它。
多谢帮忙!
1条答案
按热度按时间wztqucjr1#
您将需要使用plugin system，这将使它，以便您始终可以在正确的时间在画布上绘制，而不会被擦除