我正在使用角度js和javascript创建一个Web应用程序。在我的申请中我 我正在使用chart.js创建心率监测图表。我希望我的图表能够持续动画。这是我的代码。
function getActualData() {
var actualData = []
for (var m = 0; m < 20; m++)
actualData.push(45 + parseInt(Math.random() * 35))
return actualData;
}
var ANIMATIONSTEPS = 200;
var myLineChart;
var labels;
var animationStep;
setInterval(function () {
if (myLineChart === undefined) {
var actualData = getActualData()
var interpolationSteps = Math.ceil(ANIMATIONSTEPS / actualData.length);
labels = []
var data = []
var blankData = []
for (var i = 0; i < (actualData.length - 1); i++) {
labels.push('')
data.push(actualData[i])
blankData.push(null)
// push interpolation
var difference = actualData[i + 1] - actualData[i];
var interpolationStep = 1 / interpolationSteps;
for (var j = 1; j < interpolationSteps; j++) {
labels.push('')
data.push(actualData[i] + difference * Chart.helpers.easingEffects["linear"](j * interpolationStep));
blankData.push(null)
}
}
labels.push('')
data.push(actualData[i])
blankData.push(null)
var data = {
labels: labels,
datasets: [
{
strokeColor: "rgba(243, 118, 27, 1)",
data: blankData
},
{
strokeColor: "transparent",
data: data
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
myLineChart = new Chart(ctx).Line(data, {
animation: false,
datasetFill: false,
pointDot: false,
datasetStrokeWidth: 5,
showTooltips: false,
scaleOverride: true,
scaleSteps: 12,
scaleStepWidth: 5,
scaleStartValue: 30,
scaleShowVerticalLines: false,
scaleShowLabels: false,
});
animationStep = 0;
}
// the actual animation
myLineChart.datasets[0].points[animationStep].value = myLineChart.datasets[1].points[animationStep].value
myLineChart.update();
animationStep++;
// start new cycle
if (animationStep >= labels.length) {
myLineChart.destroy();
myLineChart = undefined;
}
}, 10)
答案 0 :(得分：2)
您需要处理来自任何来源的实时数据，然后移回当前绘制的线并在屏幕上绘制新线。以下小提琴代码可以帮助您。
var context;
var cntText;
var cnt=0;
var start=0;
var mydata = [160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190,
160,130,190,130,160,130,190,160,130,160,190,160,130,,160,190];
function init()
{
context= myCanvas.getContext('2d');
cntText=document.getElementById("data");
context.fillStyle = "#737373";
context.fill();
/*
var j=0;
var lastx=0;
var lasty=160;
for(i=0;i<600;i++)
{
var p=j*5;
drawLine(lastx,lasty,p,mydata[j],"#FF00FF");
lastx=p;
lasty=mydata[j];
i=i+4;
j++;
}*/
//move();
//alert(mydata.length);
}
function drawLine(x1,y1,x2,y2,color)
{
context.beginPath();
//context.fillStyle="#00E600";
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.strokeStyle = color;
context.lineWidth = 0.2;
context.stroke();
}
function move()
{
var j=0;
var lastx=0;
var lasty=160;
var pos=0;
//cnt=100;
cleareData();
start=cnt;
if(cnt>120)
{
start=120;
pos=cnt-120;
}
for(i=0;i<start;i++)
{
var p=i*5;
drawLine(lastx,lasty,p,mydata[pos],"#FF00FF");
lastx=p;
lasty=mydata[pos];
pos++;
}
//alert(cnt);
//cntText.value=cnt;
cnt=cnt+1;
}
function cleareData()
{
context.clearRect(0, 0, 600, 600);
for(i=0;i<600;i++)
{
drawLine(i,0,i,300,"#CCCCCC");
i=i+19
}
for(i=0;i<300;i++)
{
drawLine(0,i,600,i,"#CCCCCC");
i=i+19
}
drawLine(0,160,600,160,"#FF00FF");
}
setInterval(move, 120);
的init（）;