amcharts php,amcharts实现动态数据介绍
JavaScript实现的，同样amcharts 2.7.6支持页面动态数据展现。
以下是方法：
一，去首先amcharts.com/download下载插件包
二，修改amcharts_2.7.6 \样本中的实例
以下是area100PercentStacked.html的动态实例，代码如下：
主要添加了：
chartData2变量
reloadData方法
loadStringData方法
手动刷新按钮
[html] 查看纯文本
< 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;” >
< input type = “button” value = “手动刷新” onclick = “reloadData('')” />
amcharts php,amcharts实现动态数据介绍相关推荐
- amcharts _ 2.7.6 实现动态数据展现
老版的amcharts是基于flash的,新版的是javascript实现的,同样amcharts 2.7.6支持页面动态数据展现. 以下是方法: 一.首先去http://amcharts.com/d ...
- [Echarts可视化] 二.php和ajax连接数据库实现动态数据可视化
前一篇文章 "[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区" 主要是通过Echarts可视化介绍入门知识.中国地图和贵州地区各省份的数据分析,其中贵州地图才是它 ...
- 聊聊我常用的5款动态数据可视化工具
视频当道的时代,数据可视化自然也要动起来. 我常用的动态可视化工具主要有「Tableau.Echarts.Flourish.Python」这几个,另外加上地图可视化神器「kepler.gl」. 这五款 ...
- highcharts php 动态数据,php动态传数据到highcharts的方法
本文主要介绍了通过php动态传数据到highcharts的相关知识.具有很好的参考价值. 1:在平时工作中,在对数据进行展示的时候,是直接通过后台提供的接口来获取json串,用来展示.今天别人问怎么在 ...
- 五分钟让你的数据动起来，动态数据可视化极简教程
之前发了一条动态数据可视化的视频,有很多朋友来咨询怎么制作的,其实制作过程难度不大,上手很快,特地为大家整理了一篇制作教程,五分钟让你的数据动起来! 为什么做动态数据可视化? 动态数据可视化主要应用的 ...
- 4.3.3 用jQuery获取动态数据
4.3.3 用jQuery获取动态数据 2008-09-28 16:09 (英)格雷恩(Granc,D.)等著/贺师俊等译 人民邮电出版社 我要评论(0) 字号:T | T 综合评级: 想读(1) ...
- 使用动态数据进行数据分页
目录 介绍 动态数据 数据分页 填充数据源 页面切换 结论 下载资料库 介绍 如果您有一个大的数据集合,那么用集合中的所有数据填充项目控件就变得不切实际,更不用说用户不友好了.最好的方法是对数据进行分 ...
- SQL Server中的动态数据屏蔽
Security has been one of the prime concerns of database developers since the inception of database m ...
- SQL Server 2016的新功能–动态数据屏蔽
There are many new features in SQL Server 2016, but the one we will focus on in this post is: SQL Se ...
- 在SQL Server 2016中使用动态数据屏蔽来保护敏感数据
Dynamic Data Masking is a new security feature introduced in SQL Server 2016 that limits the access ...
最新文章
- 深度神经网络中Inception-ResNet模块介绍
- js的this与java的区别_JavaScirpt(JS)的this细究
- windows 服务实例
- vue todolist
- SpringCloud(三) Eureka之服务注册发现以及实现工程间调用
- mysql数据库中命令行下常用命令的操作（增、删、改、查）和数据类型
- 网络安全——局域网内网络攻击手段（MAC地址攻击、ARP攻击、DHCP攻击）
- 如何生成二维码及注意事项
- 设置手动双面打印_双面打印文档，你会吗？学会这几招，自动双面打印问题轻松解决...
- 小米手机怎么按键测试软件,小米手机开机后出现工厂方式自动测试等等是什么意思...
- json rpgmv 加密_rpg制作大师mv加密打包教程
- 如何一天做出新闻搜索引擎（1）——新闻的搜集与数据库的建立
- Office小知识（五）——Word中删除分节符而不影响前节页面设置
- 移动硬盘读取速度一般是多少
- html5模拟真实摇骰子,Axure教程：模拟真实摇骰子交互
- 【老罗笔记】异类(Outliers)
- 勃林格殷格翰2022年营收强势增长10.5%，达241亿欧元
- 多线程与JUC面试题
- 读书笔记 -- 《瓦尔登湖》
- 电子商务格局下的营销未来