2
我正在使用角度js和javascript創建一個web應用程序。在我的應用程序I 上午使用chart.js創建心率監測器圖表。我希望我的圖表能夠持續動畫。這是我的代碼。使用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)
小提琴：http://jsfiddle.net/t795k4j3/