amcharts의 동적 데이터 구현 소개
- 零下一度원래의
- 2017-07-27 16:12:022331검색
JavaScript로 구현된 amcharts 2.7.6은 페이지에 동적 데이터 표시도 지원합니다.
방법은 다음과 같습니다.
먼저 amcharts.com/download로 이동하여 먼저 플러그인 패키지를 다운로드합니다.
두 번째, amcharts_2.7.6 샘플의 예제를 수정합니다.
다음은 Area100PercentStacked의 동적 예제입니다. .html, 코드는 다음과 같습니다.
주로 추가된 내용:
chartData2 변수
reloadData 메서드
loadStringData 메서드
수동 새로 고침 버튼
[html] 일반 텍스트 보기
<！DOCTYPE HTML PUBLIC“ - // W3C // DTD HTML 4.01 // EN”“http://www.w3.org/TR/html4/strict.dtd”>
< html >
< head >
< meta http-equiv = “Content-Type” content = “text / html; charset = utf-8” >
< title > amCharts示例</ title >
< link rel = “stylesheet” href = “style.css” type = “text / css” >
< script src = “../amcharts / amcharts.js” type = “text / javascript” > </ script>
< script type = “text / javascript” >
变形图
var chartData = [{
年份：1994年，
汽车：1587，
摩托车：650，
自行车：121
}，{
年：1995年，
汽车：1567，
摩托车：683，
自行车：146
}，{
年：1996年，
汽车：1617，
摩托车：691，
自行车：138
}，{
年：1997年，
汽车：1630，
摩托车：642，
自行车：127
}，{
年份：1998年，
汽车：1660，
摩托车：699，
自行车：105
}，{
年份：1999年，
汽车：1683，
摩托车：721，
自行车：109
}，{
年份：2000年，
汽车：1691，
摩托车：737，
自行车：112
}，{
年份：2001年，
汽车：1298，
摩托车：680，
自行车：101
}，{
年：2002年，
汽车：1275，
摩托车：664，
自行车：97
}，{
年份：2003年，
汽车：1246，
摩托车：648，
自行车：93
}，{
年份：2004年，
汽车：1218，
摩托车：637，
自行车：101
}，{
年份：2005年，
汽车：1213，
摩托车：633，
自行车：87
}，{
年份：2006年，
汽车：1199，
摩托车：621，
自行车：79
}，{
年份：2007年，
汽车：1110，
摩托车：210，
自行车：81
}，{
年份：2008年，
汽车：1165，
摩托车：232，
自行车：75
}，{
年份：2009年，
汽车：1145，
摩托车：219，
自行车：88
}，{
年份：2010年，
汽车：1163，
摩托车：201，
自行车：82
}，{
年份：2011，
汽车：1180，
摩托车：285，
自行车：87
}，{
年份：2012，
汽车：1159，
摩托车：277，
自行车：71
}];
var chartData2 = [{
年：1995年，
汽车：1567，
摩托车：683，
自行车：146
}，{
年：1996年，
汽车：1617，
摩托车：691，
自行车：138
}，{
年：1997年，
汽车：1630，
摩托车：642，
自行车：127
}，{
年份：1998年，
汽车：1660，
摩托车：699，
自行车：105
}，{
年份：1999年，
汽车：1683，
摩托车：721，
自行车：109
}，{
年份：2000年，
汽车：1691，
摩托车：737，
自行车：112
}，{
年份：2001年，
汽车：1298，
摩托车：680，
自行车：101
}，{
年：2002年，
汽车：1275，
摩托车：664，
自行车：97
}，{
年份：2003年，
汽车：1246，
摩托车：648，
自行车：93
}，{
年份：2004年，
汽车：1218，
摩托车：637，
自行车：101
}，{
年份：2005年，
汽车：1213，
摩托车：633，
自行车：87
}，{
年份：2006年，
汽车：1199，
摩托车：621，
自行车：79
}，{
年份：2007年，
汽车：1110，
摩托车：210，
自行车：81
}，{
年份：2008年，
汽车：1165，
摩托车：232，
自行车：75
}，{
年份：2009年，
汽车：1145，
摩托车：219，
自行车：88
}，{
年份：2010年，
汽车：1163，
摩托车：201，
自行车：82
}，{
年份：2011，
汽车：1180，
摩托车：285，
自行车：87
}，{
年份：2012，
汽车：1159，
摩托车：277，
自行车：71
}，{
年份：2013年，
汽车：1259，
摩托车：377，
自行车：91
}];
AmCharts.ready（function（）{
//串行图
chart = new AmCharts.AmSerialChart（）;
chart.pathToImages = “../amcharts/images/” ;
chart.zoomOutButton = {
backgroundColor：“＃000000”，
backgroundAlpha：0.15
};
chart.dataProvider = chartData ;
chart.categoryField = “year” ;
chart.addTitle（“每年交通事故”，15）;
// AXES
//类别
var categoryAxis = chart .categoryAxis;
categoryAxis.gridAlpha = 0 .07;
categoryAxis.axisColor = “#DADADA” ;
categoryAxis.startOnAxis = true ;
//值
var valueAxis = new AmCharts.ValueAxis（）;
valueAxis.title = “percent” ; //这行使图表“堆叠”
valueAxis.stackType = “100％” ;
valueAxis.gridAlpha = 0 .07;
chart.addValueAxis（valueAxis）;
// GRAPHS
//第一张图
var graph = new AmCharts.AmGraph（）;
graph.type = “line” ; //这是简单的线图
graph.title = “汽车” ;
graph.valueField = “cars” ;
graph.balloonText = “[[value]]（[[ percents ]]％）” ;
graph.lineAlpha = 0 ;
graph.fillAlphas = 0 0.6; //将fillAlphas设置为 > 0，使其成为区域图
chart.addGraph（图形）;
//第二张图
var graph = new AmCharts.AmGraph（）;
graph.type = “line” ;
graph.title = “摩托车” ;
graph.valueField = “摩托车” ;
graph.balloonText = “[[value]]（[[ percents ]]％）” ;
graph.lineAlpha = 0 ;
graph.fillAlphas = 0 0.6;
chart.addGraph（图形）;
//第三张图
var graph = new AmCharts.AmGraph（）;
graph.type = “line” ;
graph.title = “自行车” ;
graph.valueField = “bike” ;
graph.balloonText = “[[value]]（[[ percents ]]％）” ;
graph.lineAlpha = 0 ;
graph.fillAlphas = 0 0.6;
chart.addGraph（图形）;
// LEGEND
var legend = new AmCharts.AmLegend（）;
legend.align = “center” ;
chart.addLegend（图例）;
// CURSOR
var chartCursor = new AmCharts.ChartCursor（）;
chartCursor.zoomable = false ; //因为图表显示的值不是太多，所以禁用缩放
chartCursor.cursorAlpha = 0 ;
chart.addChartCursor（chartCursor）;
// WRITE
chart.write（ “chartdiv”）;
}）;
//刷新事件
function reloadData（url）{
var dynamicData = loadStringData （url）;
// fileSystemChart.dataProvider = eval （'（'+ dynamicData +'）'）; //如果ajax获取得来的数据包含引号，需要eval（）函数处理一下
chart.dataProvider = dynamicData ;
chart.validateNow（）;
chart.validateData（）;
}
// AJAX请求
function loadStringData（link）{
return chartData2;
/ *下面的是ajax请求，可以从服务器获取动态数据
if（window.XMLHttpRequest）{
// IE7 +，Firefox，Chrome，Opera，Safari
var request = new XMLHttpRequest（）;
}
else {
//代码为IE6，IE5
var request = new ActiveXObject（'Microsoft.XMLHTTP'）;
}
//加载
request.open（'GET'，link，false）;
request.send（）;
return request.responseText;
* /
}
window.setInterval（“reloadData（''）”，5000）; //五秒刷新
</ script > </ head > < body > < div id = “chartdiv” style = “width：100％; height：400px;” > </div > < input type = “button” value = “手动刷新” onclick = “reloadData（''）” />
</ body >
</ html >위 내용은 amcharts의 동적 데이터 구현 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.