Home > Article > Web Front-end > Introduction to dynamic data implementation in amcharts
Introduction to dynamic data implementation in amcharts
- 零下一度Original
- 2017-07-27 16:12:022332browse
Implemented in JavaScript, amcharts 2.7.6 also supports page dynamic data display.
The following is the method:
First, go to amcharts.com/download to download the plug-in package
Second, modify the example in amcharts_2.7.6\sample
The following is a dynamic example of area100PercentStacked.html, the code is as follows:
Mainly added:
chartData2 variable
reloadData method
loadStringData method
Manual refresh button
[html] View plain text
<！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 >The above is the detailed content of Introduction to dynamic data implementation in amcharts. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of time format processing in JavaScriptNext article：Detailed explanation of time format processing in JavaScript
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills