jqplot 도표 플러그 인
http://www.jqplot.com/index.php (jqplot 의 공식 사이트)
이 플러그 인 은 기본 적 인 도형 만 그 릴 수 있 고 데이터 구조 가 복잡 하기 때문에 필 자 는 프로젝트 에서 사용 하 는 것 을 권장 하지 않 습 니 다.
예 는 다음 과 같다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
<script class="include" type="text/javascript" src="jquery.min.js"></script>
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>
<script class="code" type="text/javascript">
$.jqplot.config.enablePlugins = true;
$(function(){
var s1 = [200, 600, 700, 1000];
var s2 = [460, -210, 690, 820];
var s3 = [-260, -440, 320, 200];
var ticks = ['May', 'June', 'July', 'August'];
var myplot = $.jqplot('mychart',[s1, s2, s3],{
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {fillToZero: true}
},
series:[
{label:'Hotel'},
{label:'Event Regristration'},
{label:'Airfare'}
],
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
pad: 1.05,
tickOptions: {formatString: '$%d'}
}
}
});
});
function generatorpng(){
var divchart = $("#mychart");
var imagestr = divchart.jqplotToImageElem({bakcgroundColor:divchart.css('background-color')});
$("#myimage").append(imagestr);
}
</script>
</head>
<body>
<input type="button" id="btn" name="btn" value=" " onclick="generatorpng();" />
<div id="mychart"></div>
<div id="myimage"></div>
</body>
</html>
【 주 의 】: 이미지 생 성 기능 은
Firefox 혹은
이렇게
웹 kit 커 널 브 라 우 저 에서 사용 하기 좋 습 니 다. 현재 필자 의 테스트 를 거 쳤 습 니 다.
IE 커 널 의 브 라 우 저 는 모두 유효 하지 않 습 니 다. 생 성 된 그림 은?
null。
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
