JavaScript 는 RGraph 를 통 해 동적 계기판 을 어떻게 실현 합 니까?
7055 단어 JavaScriptRGraph동태계기판
본 고 는 Rgraph 라 는 플러그 인 을 소개 합 니 다.RGraph 통계 도 를 사용 하여 플러그 인 을 만 들 면 이 자원 의 점용 을 0 에 가 까 운 정도 로 줄 일 수 있 습 니 다.모든 통계 도 를 만 드 는 작업 은 클 라 이언 트 에서 이 루어 지기 때 문 입 니 다.HTML 페이지 를 렌 더 링 하 는 것 처럼 서버 측은 데이터 만 보 내 고 통계 도의 생 성과 발송 을 책임 지지 않 습 니 다.대역 폭 의 점용 상황 도 크게 개선 됐다.
또한 통계 도 는 자바 스 크 립 트 에 의 해 생 성 되 기 때문에 통계 도 를 표시 하 는 HTML 페이지 를 볼 때 이 페이지 는 오프라인 상태 가 될 수 있 습 니 다.
브 라 우 저의 경우 현재 이 플러그 인 은 Firebox 4,Google Chrome 10,Opera 11,Safari 5,IE9 브 라 우 저의 지원 을 받 고 있 습 니 다.
홈 페이지:http://www.rgraph.net/examples/index.html!
나 는 오늘 계기판 의 실현,세 개의 계기판,다른 양식 에 관 한 것 을 할 뿐이다!효 과 는 다음 과 같 습 니 다:
자바 소 강 이라는 제목 의 내용 과 스타일 을 설정 할 수도 있 고,아래 의 내용 과 스타일 을 설정 할 수도 있 습 니 다.예 를 들 어:[email protected] ！
첫 번 째 와 세 번 째 생 성 시:
var gauge1 = new RGraph.Gauge('cvs1', 0, 100, 84);
var gauge3 = new RGraph.Gauge('cvs3', -100, 100, 84);
그림 의 주소,최소 값,최대 값 과 현재 값,두 번 째 매개 변 수 는 약간 다 릅 니 다.
var gauge2 = new RGraph.Gauge('cvs2', 0, 200, [184,12]); 그 는 두 개의 지침 이기 때문에 현재 값 매개 변 수 는 하나의 배열 이다.
그러면 어떤 사람 이 말 했 습 니 다.그럼 저 는 세 개의 지침 을 그 리 려 고 합 니 다.어 떡 합 니까?간단 합 니 다.세 개의 인 자 를 전달 하 겠 습 니 다!
우리 전체 페이지 의 원본 코드 를 보 여 드 리 겠 습 니 다.실행 하면 위의 효과 입 니 다.
<html>
<head>
<title>Examples of the Gauge chart</title>
<script src="RGraph.common.core.js" ></script>
<script src="RGraph.common.effects.js" ></script>
<script src="RGraph.common.dynamic.js" ></script>
<script src="RGraph.gauge.js" ></script>
<script src="excanvas.js"></script>
<script>
window.onload = function () {
var gauge1 = new RGraph.Gauge('cvs1', 0, 100, 84);
gauge1.Set('chart.scale.decimals', 0);
gauge1.Set('chart.tickmarks.small', 50);
gauge1.Set('chart.tickmarks.big',5);
gauge1.Set('chart.title.top', 'Java ');
gauge1.Set('chart.title.top.size', 24);
gauge1.Set('chart.title.bottom', '[email protected]');
gauge1.Set('chart.title.bottom.color', '#aaa');
gauge1.Draw();
function Updategauge () {
gauge1.value=RGraph.random(5,90);
RGraph.Effects.Gauge.Grow(gauge1);
setTimeout(Updategauge, 2000);
}
Updategauge();
var gauge2 = new RGraph.Gauge('cvs2', 0, 200, [184,12,58]);
gauge2.Set('chart.title.top', 'Java ');
gauge2.Set('chart.title.bottom.size', 'Italic 14'); // Hmmmm
gauge2.Set('chart.title.bottom.font', 'Impact');
gauge2.Set('chart.title.bottom.color', '#ccc');
gauge2.Set('chart.title.bottom', '[email protected]');
gauge2.Set('chart.title.bottom.pos', 0.4);
gauge2.Set('chart.background.color', 'black');
gauge2.Set('chart.background.gradient', true);
gauge2.Set('chart.centerpin.color', '#666');
gauge2.Set('chart.needle.colors', [RGraph.RadialGradient(gauge2, 125, 125, 0, 125, 125, 25, 'transparent', 'white'),
RGraph.RadialGradient(gauge2, 125, 125, 0, 125, 125, 25, 'transparent', '#d66')]);
gauge2.Set('chart.needle.size', [null, 50]);
gauge2.Set('chart.text.color', 'white');
gauge2.Set('chart.tickmarks.big.color', 'white');
gauge2.Set('chart.tickmarks.medium.color', 'white');
gauge2.Set('chart.tickmarks.small.color', 'white');
gauge2.Set('chart.border.outer', '#666');
gauge2.Set('chart.border.inner', '#333');
gauge2.Set('chart.colors.ranges', []);
gauge2.Draw();
function Updategauge2 () {
gauge2.value = [RGraph.random(2,190), RGraph.random(5,195), RGraph.random(5,195)]
RGraph.Effects.Gauge.Grow(gauge2);
setTimeout(Updategauge2, 2000);
}
Updategauge2();
var gauge3 = new RGraph.Gauge('cvs3', -100, 100, 84);
gauge3.Set('chart.scale.decimals', 0);
gauge3.Set('chart.tickmarks.small', 50);
gauge3.Set('chart.tickmarks.big',5);
gauge3.Set('chart.title.top', 'Java ');
gauge3.Set('chart.title.top.size', 24);
gauge3.Set('chart.title.bottom', '[email protected]');
gauge3.Set('chart.title.bottom.color', '#aaa');
gauge3.Set('chart.colors.ranges', [[-100, -90, 'red'], [-90, -80, 'yellow'], [80, 90, 'yellow'], [90, 100, 'red']]);
gauge3.Set('chart.adjustable', true);
gauge3.Draw();
function Updategauge3 () {
gauge3.value = RGraph.random(2,99);
RGraph.Effects.Gauge.Grow(gauge3);
setTimeout(Updategauge3, 2000);
}
Updategauge3();
}
</script>
</head>
<body>
<div style="text-align: center">
<canvas id="cvs1" width="250" height="250">[No canvas support]</canvas>
<canvas id="cvs2" width="250" height="250">[No canvas support]</canvas>
<canvas id="cvs3" width="250" height="250">[No canvas support]</canvas>
</div>
</body>
</html>이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
