0
再生/一時停止機能付きのcanvasJSを使用してダイナミック折れ線グラフを作成しました。チャート内の線がy軸線の始点とy軸の間にはいくらかのスペースがあります。そのスペースを削除して、PLAYボタンを押すと、ラインが常に流れるように移動するようにします。ダイナミックCANVAS JS線グラフと対応するY軸のダイナミックライン間のスペースを取り除く方法
<!DOCTYPE HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<script type="text/javascript" src="canvasjs.min.js"></script>
<script type="text/javascript">
var dataArray = [{
x: 0,
y: 0
},{
x: 1,
y: 10
}, {
x: 2,
y: 13
}, {
x: 3,
y: 18
}, {
x: 4,
y: 20
}, {
x: 5,
y: 17
}, {
x: 6,
y: 10
}, {
x: 7,
y: 13
}, {
x: 8,
y: 18
}, {
x: 9,
y: 20
}, {
x: 10,
y: 17
}, {
x: 11,
y: 13
}, {
x: 12,
y: 18
}, {
x: 13,
y: 20
}, {
x: 14,
y: 17
}, {
x: 15,
y: 10
}, {
x: 17,
y: 13
}, {
x: 18,
y: 18
}, {
x: 19,
y: 20
}, {
x: 20,
y: 100
}];
function plot(dataArray,windowFrame,chartTitle,xAxisTitle,yAxisTitle) {
var dps=[];
for(var a=0;a<windowFrame;a++)
{
dps[a]=dataArray[a];
}
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: chartTitle
},
axisX: {
title: xAxisTitle
},
axisY: {
title: yAxisTitle
},
data: [{
type: "line",
dataPoints: dps
}]
});
chart.render();
$(".canvasjs-chart-credit").empty();
var updateInterval = 1000;
var flag = true;
var interval;
var updateChart = function() {
if(a<dataArray.length)
{
dps.push({
x: dataArray[a].x,
y: dataArray[a].y
});
a++;
if (dps.length > windowFrame+1) {
dps.shift();
}
}
chart.render();
// update chart after specified time.
};
$('#playPause').click(function() {
if (flag) {
$(this).html('Pause');
interval = setInterval(function() {
updateChart()
}, updateInterval);
} else {
$(this).html('Play');
clearInterval(interval);
}
flag = !flag;
});
}
</script>
</head>
<body>
<button id="Plot" onclick="plot(dataArray,5,'Chart Title','x-axisTitle','y-axis Title')">Plot</button>
<div id="chartContainer" style="height: 600px; width: 500px;">
</div>
<button id="playPause">Play/ Pause</button>
</body>
</html>