JS highcharts 동적 곡선 코드 예시 실현
4142 단어 JShighcharts동태곡선.
주요 특성 은 다음 과 같 습 니 다.
호환성:아이 폰,IE,화 호 등 현재 의 모든 브 라 우 저 를 호 환 합 니 다.
개인 사용자 에 게 완전 무료;
순수 JS,BS 없 음;
대부분의 도표 유형:직선 도,곡선 도,구역 도,지역 곡선 도,기둥 모양 도,떡 포장 도,산포도 지원;
크로스 언어:PHP,.net,자바 모두 사용 할 수 있 습 니 다.세 개의 파일 만 필요 합 니 다.하 나 는?
Highcarts 의 핵심 파일 인 Highcarts.js,그리고 a canvas emulator for IE 와 Jquery 라 이브 러 리 또는 MooTools 라 이브 러 리;
알림 기능:마우스 가 도표 의 한 점 으로 이동 하면 알림 정보 가 있 습 니 다.
확대 기능:도표 부분 확대,근거리 관찰 도표 선택;
용이 성:특별한 개발 기능 이 필요 없 이 옵션 만 설정 하면 자신 에 게 맞 는 도 표를 만 들 수 있 습 니 다.
시간 축:밀리초 까지 정확 할 수 있 습 니 다.
홈 페이지:http://www.highcharts.com/!
안에 그들의 예 와 참고 코드 가 있 습 니 다.자신의 응용 을 참고 할 수 있 습 니 다.만약 에 정적 인 도형 전시 라면 사용 은 매우 간단 합 니 다!
홈 페이지 의 한 예 를 참조 하여 동적 곡선의 응용 을 실현 하 겠 습 니 다.
효 과 는 다음 과 같 습 니 다:
이 곡선 은 동적 입 니 다.그의 홈 페이지 효과 주소:http://www.highcharts.com/demo/dynamic-update!
나 는 그 를 JSP 에 응용 했다.코드 는 다음 과 같다.
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>Highcharts Example</title>
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="highcharts.js"></script>
<script language="javascript" type="text/javascript" src="exporting.js"></script>
<script type="text/javascript">
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: '<b>Java </b>'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: ' ：M'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
});
});
</script>
</head>
<body>
<div id="container" style="width: 800px;height: 400px"></div>
</body>
</html>그 가 필요 로 하 는 데이터 형식 은 2 차원 배열 이다.
데이터 의 업 데 이 트 는 chart 대상 에 이벤트 속성 이 있 기 때 문 입 니 다.그 안에 정 의 된 방법 은 addPoint 를 사용 하여 데이터 점 의 증가 와 갱신 을 실현 합 니 다!
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
