我有一个使用变量作为数据的chartjs。我希望它被更新，使得新的数据可以看出。会是最好的，如果我可以插入数据时有做，但我不知道该怎样做到这一点的线索，另一个选项是与时间间隔进行更新。我已经看了看https://www.chartjs.org/docs/latest/developers/updates.html但它没有意义的，我
这里是我的代码图表工作只是需要使它更新自己的
<div class="row bg-dark">
<div class="col-12 border">
<canvas id="myChart"></canvas>
</div>
</div>
<div class="container">
<div>
<?php
$sth = $db->prepare("SELECT Actual FROM csvhoejde1");
$sth->execute();
/* Fetch all of the remaining rows in the result set */
$result = $sth->fetchAll(PDO::FETCH_COLUMN);
// $result = explode("@", implode(",@", $result));
// print_r for at se resultaterne.
echo'<pre>';
print_r($result);
echo'</pre>';
$std = $db->prepare("SELECT Dato_ur_stillet FROM palle_tbs");
$std->execute();
/* Fetch all of the remaining rows in the result set */
$palle = $std->fetchAll(PDO::FETCH_COLUMN);
?>
<div>
</div>
<!----------------------myChart---------------------->
<script src="./assets/charts/dist/Chart.js"></script>
<script>
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");
var horizonalLinePlugin = {
afterDraw: function(chartInstance) {
var yScale = chartInstance.scales["y-axis-0"];
var canvas = chartInstance.chart;
var ctx = canvas.ctx;
var index;
var line;
var style;
if (chartInstance.options.horizontalLine) {
for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
line = chartInstance.options.horizontalLine[index];
if (!line.style) {
style = "rgba(169,169,169, .6)";
} else {
style = line.style;
}
if (line.y) {
yValue = yScale.getPixelForValue(line.y);
} else {
yValue = 0;
}
ctx.lineWidth = 3;
if (yValue) {
ctx.beginPath();
ctx.moveTo(0, yValue);
ctx.lineTo(canvas.width, yValue);
ctx.strokeStyle = style;
ctx.stroke();
}
if (line.text) {
ctx.fillStyle = style;
ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
}
}
return;
};
}
};
Chart.pluginService.register(horizonalLinePlugin);
var data = {
labels: [<?php echo join($palle, ',') ?>],
datasets: [{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [<?php echo join($result, ',') ?>],
}]
};
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
"horizontalLine": [{
"y": 140,
"style": "rgba(255, 0, 0, .4)",
}, {
"y": 120,
"style": "#00ffff",
}]
}
});
</script>
还有，你可以实现这几个方面。
最简单的，但可能是“最坏”的解决办法是简单地刷新页面每隔x秒。然而，这种解决方案将使得网页没用，因为输入等，每次都会重新刷新页面上几乎所有的交互性。把下面的你<head>部分。 content将定义每次刷新之间多少秒。
<META HTTP-EQUIV="refresh" CONTENT="5">
存在使用setInterval它调用函数来更新图表的方式（参见例如：https://jsbin.com/yitep/5/edit?html,js,output）。
或下一个解决办法是增加一个功能，您将在数据插入调用。你可以通过调用你的情况myChart.update()更新图表。它somethimes可能发生，你没有或不能得到图表实例，在这种情况下，你可以使用（这只是获得实例的方式，你需要，如果代码是在另一个脚本执行）：
Chart.helpers.each(Chart.instances, function (chart) {
// your code
}
现在，当你有图表例如，您可以用数据，用addData和removeData（检查文档它是如何工作）操纵。
问题是，它经过的所有图表，所以你需要以某种方式检查什么是目标图表，你可以做到这一点与chart.chart.canvas.id。这个命令会给你帆布病历ID，你的情况myChart所以你可以做你选择什么样的图表唯一变化。
为了得到图表选项，您可以使用图表API事件chart.getDatasetMeta(0)（检查文档：https://www.chartjs.org/docs/latest/developers/api.html）。
希望它能帮助，可随时要求更多。