ajax가 data_javascript 기술을 읽은 후 jqchart를 사용하여 차트를 표시하는 방법
- WBOY원래의
- 2016-05-16 15:56:151418검색
이 기사의 예에서는 ajax로 데이터를 읽은 후 jqchart를 사용하여 차트를 표시하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.
최근 프로젝트에서는 차트 효과를 표시해야 하는데, 모아놓은 차트 플러그인이 드디어 활용되게 되었습니다.
그러나 jqchart와 비교하면 여전히 많은 차이점이 있습니다.
실현 효과:
jqchart를 다시 작성했습니다.
가장 먼저 해결해야 할 문제는 x축과 y축을 표시하지 않는 것입니다.
//各DIV作成
// 取消标题显示
/*
this.titleBox//Title
=this.mkBoxElement('T',
this.op.titleLeft,this.op.titleTop
).appendTo(this.jQcanvasBox)
.css('width',this.op.width-this.op.titleLeft)
//fix for safari3 2007.12.4
.get(0);
*/
// 取消y轴数字显示
/*
this.scaleYBox//Y軸スケール
=this.mkBoxElement('Y',
this.op.scaleYLeft,this.op.scaleYTop
).appendTo(this.jQcanvasBox).get(0);
*/
// 取消x轴分类显示
/*
this.scaleXBox//X軸スケール
=this.mkBoxElement('X',
this.op.scaleXLeft,this.op.scaleXTop
).appendTo(this.jQcanvasBox).get(0);
*/
둘째, 변곡점의 텍스트에 대해 원래 표시는 해당 데이터 값이었지만 이제는 해당 x축 이름을 표시해야 합니다.
if( x <= op.width){
var dx=x-op.paddingL,dy=y-op.paddingT;
var dxx = i<=0 ? (dx+op.labelDataOffsetX - 5 + 'px'):( dx+op.labelDataOffsetX - 20 + 'px'); //坐标点x轴偏移
var dyy = i%2 ? (dy+op.labelDataOffsetY - 25 + 'px'):(dy+op.labelDataOffsetY - 5 + 'px'); //坐标点y轴偏移
it.wrtText(
//dx+op.labelDataOffsetX - 20 + 'px',
dxx,
//dy+op.labelDataOffsetY - 10 + 'px',
dyy,
//op.rows[i], // pre: 坐标点data值
op.txtpointers[i], // cychai:坐标点文字
op,
"#jQchart-data-D-"+op.id
).css('color',(op.data.length==1)?'#333':strokeStyle)
.css({"width":"100px","font-size":"12px"}); // cychai:样式控制
기본 데이터가 표시될 수 있습니다. 다음 단계는 개발에 협력하는 것입니다.
Ajax를 사용하여 비동기적으로 데이터를 얻은 다음 이를 포그라운드에 표시하고 싶습니다.
여기서는 필수 데이터 페이지인 Chartdata.html 샘플 페이지를 사용했습니다
[{labelX : ["디자인","휴대성","사용하기 쉬움","배터리 대기","카메라 기능","줌"],data:[[5,7,2,3 ,9 ,4]]}]
포그라운드에서는 ajax를 통해 페이지를 요청하고 반환된 json 데이터를 처리한 후 ChartSetting에 전달합니다.
$(function(){
$.ajax({
url: "chartdata.html",
type: "GET",
success: function(cdata){
showDDChart(cdata);
}
});
function showDDChart(cdata){
var dd_chart = eval(cdata)[0];
var chartSetting={
config : {
title : "",
titleLeft: 70,
labelX :dd_chart.labelX,
//labelX :["外观设计","便携性","易用性","电池待机","摄像功能","变焦"],
scaleY : {min: 0,max:10,gap:2},
width: 300+25,
height: 125+50,
paddingL : 10,
paddingT : 10
},
//data: [[5,3,1,8,4,9]]
data :dd_chart.data
};
$('#canvasMyID').jQchart(chartSetting);
}
});
전체 HTML 페이지:
<head>
<!--[if IE]>
<mce:script src="excanvas-compressed.js" mce_src="excanvas-compressed.js" type="text/javascript" ></mce:script>
<![endif]-->
<mce:script src="http://jsgt.org/lib/jquery/plugin/jqchart/sample/v003/lib/jquery-1.2.3.min.js" mce_src="http://jsgt.org/lib/jquery/plugin/jqchart/sample/v003/lib/jquery-1.2.3.min.js" type="text/javascript"></mce:script>
<mce:script src="jquery.jqchart.js" mce_src="jquery.jqchart.js" type="text/javascript" charset="utf-8"></mce:script>
</head><body>
<canvas id="canvasMyID" height="200"></canvas>
<mce:script type="text/javascript"><!--
$(function(){
$.ajax({
url: "chartdata.html",
type: "GET",
success: function(cdata){
showDDChart(cdata);
}
});
function showDDChart(cdata){
var dd_chart = eval(cdata)[0];
var chartSetting={
config : {
title : "",
titleLeft: 70,
labelX :dd_chart.labelX,
//labelX :["外观设计","便携性","易用性","电池待机","摄像功能","变焦"],
scaleY : {min: 0,max:10,gap:2},
width: 300+25,
height: 125+50,
paddingL : 10,
paddingT : 10
},
//data: [[5,3,1,8,4,9]]
data :dd_chart.data
};
$('#canvasMyID').jQchart(chartSetting);
}
});
// --></mce:script>
</body>
</html>
자, 끝났습니다!
이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.