ホームページ > 記事 > ウェブフロントエンド > 動的データの amcharts 実装の概要
動的データの amcharts 実装の概要
- 零下一度オリジナル
- 2017-07-27 16:12:022322ブラウズ
JavaScript によって実装された amcharts 2.7.6 は、ページ上の動的なデータ表示もサポートしています。
その方法は次のとおりです:
まず、amcharts.com/download にアクセスしてプラグイン パッケージをダウンロードします
次に、amcharts_2.7.6 サンプルの例を変更します
以下は area100PercentStacked の動的な例です.html、コードは次のとおりです:
主に追加されたGot:
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 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。