JS 드로잉 Flot 는 어떻게 동적 으로 곡선 도 를 새로 고 칠 수 있 습 니까?
마찬가지 로 서로 다른 브 라 우 저 를 호 환 하기 위해 서 는 반드시 세 개의 JS 파일 을 도입 해 야 합 니 다.그렇지 않 으 면 IE 에서 실 행 될 수 없습니다.
일단 효 과 를 볼 게 요!
새로 고침 간격 이 실현 되 는 것 은 바로 특정한 함 수 를 정시 에 호출 하 는 것 입 니 다.이 함 수 는 그림 대상 안의 데 이 터 를 업데이트 하면 됩 니 다.
코드 를 살 펴 보 겠 습 니 다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Flot </title>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript">
$(function () {
//
var data = [], totalPoints = 300;
//
function getRandomData() {
if (data.length > 0)
datadata = data.slice(1);
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50;
var y = prev + Math.random() * 10 - 5;
if (y < 0)
y = 0;
if (y > 100)
y = 100;
data.push(y);
}
var res = [];
for (var i = 0; i < data.length; ++i)
res.push([i, data[i]])
return res;
}
var updateInterval = 30; //
//
$("#updateInterval").val(updateInterval).change(function () {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1)
updateInterval = 1;
if (updateInterval > 2000)
updateInterval = 2000;
$(this).val("" + updateInterval);
}
});
//
var options = {
series: { shadowSize: 0 }, // ， 0
yaxis: { min: 0, max: 100 }, // Y
xaxis: { show: false } // X
};
// ： 、 、
var plot = $.plot($("#placeholder"), [ getRandomData() ], options);
function update() {
// ，
plot.setData([ getRandomData() ]); //
// ， plot.setupGrid()
plot.draw();
//
setTimeout(update, updateInterval);
}
//
update();
});
</script>
</head>
<body>
<div id="placeholder" style="width:600px;height:300px;"></div>
<br><br>
：<input id="updateInterval" type="text" value="" style="text-align: right; width:5em">
</body>
</html> 이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
