amcharts使用总结
由于业务需要,需要将后台数据使用图表的方式展现在前端。目前关于图表展现的软件比较多,有high chart,JFree charts 等。我们选择的是amcharts。
var uri2="checkSeatQuery01.htm?dep="+dep+"&arr="+arr+"&date="+date+"&time="+Math.random();
var so2 = new SWFObject("/static/js/amline.swf", "amline", "100%", "100%", "8", "#FFFFFF");
so2.addVariable("path", "/static/js/");
so2.addVariable("settings_file", encodeURIComponent("/static/xml/amline_settings_checkSeat2.xml"));
so2.addVariable("data_file", escape(uri2));//通过url传入动态数据
so2.write("flashcontent2");
其中amline_settings_checkSeat2.xml为图表配置文件,可以参考http://extra.amcharts.com/editor/line/ ,你实时的调节相关配置参数,就能动态看到效果了,然后他还可以直接帮你生成你所需要的配置文件,非常方便。
而uri2则负责在后台将请求数据封装成xml格式,如下:
@RequestMapping("checkSeatQuery01.htm")
public void checkSeatQuery01(final HttpServletRequest request, final HttpServletResponse response,ModelMap result) throws IOException
{
String dep=UnicodeToString(request.getParameter("dep"));
String arr=UnicodeToString(request.getParameter("arr"));
String date=request.getParameter("date");
try{
List<Map<String,Object>> resultlist=checkSeatService.selectCheckSeat(dep, arr, date);
String s=generateDataXmlString(resultlist);
PrintWriter writer = response.getWriter();
writer.write(s);
}
catch(Exception e){
logger.info("check seat service failure",e);
}
}
private static String generateDataXmlString(List<Map<String,Object>> list) {
if (list == null || list.size() == 0){
return "<chart><series></series><graphs></graphs></chart>";
}
StringBuffer series = new StringBuffer("<chart><series>");
StringBuffer graphs=new StringBuffer("<graphs>");
for(int i=0;i<list.size();i++){
Iterator it = list.get(i).keySet().iterator();
int j=0;
graphs.append("<graph gid=\""+i+"\">");
if(!it.hasNext()){
series.append("<value xid=\"0\">0</value>");
graphs.append("<value xid=\"0\">0</value>");
}
while(it.hasNext()){
String key=(String)it.next();
if(i==0){
series.append("<value xid=\""+j+"\">"+key+"</value>");
}
graphs.append("<value xid=\""+j+"\">"+list.get(i).get(key)+"</value>");
j++;
}
if(i==0)
series.append("</series>");
graphs.append("</graph>");
}
series.append(graphs).append("</graphs></chart>");
return series.toString();
}
以上使用十分简单,但是由于是url主动去请求数据,当在一个页面上画多图,同时应用在存在多机器的时候,页面上的图展示的可能是不同机器的数据(而不是同一机器上的,不符合需求)。
随后,我们使用ancharts2.2版本,将数据一次性传到前端,用js解析,然后交给amcharts画图,主要的工作集中到前端JS如下:
<script type="text/javascript">
var chart1;
var chart2;
var chart3;
jQuery(document).ready(function(){
var request_rate;//后台传入的数据集
var success_percent;//后台传入的数据集
var request_rate;//后台传入的数据集
//var chartData=[{data:1000,price:125},{data:1230,price:100},{data:1250,price:150},{data:1500,price:140},{data:900,price:80}]
//一共画三张图;
amchartDisplay(chart1,parseData(collect_performance),"chartdiv0");
amchartDisplay(chart2,parseData(success_percent),"chartdiv1");
amchartDisplay(chart3,parseData(request_rate),"chartdiv2");
});
//数据解析函数,以满足amcharts输入要求。
function parseData(data){
//alert(data);
var dataProvider=[];
var rows = data.split(";");
for (var i = 0; i < rows.length; i++){
if (rows[i]) {
var column = rows[i].split(":");
var time = column[0];
var value = column[1];
var dataObject = {data:time, price:value};
dataProvider.push(dataObject);
}
}
//alert(dataProvider);
return dataProvider;
}
//amcharts画图函数
function amchartDisplay(chart,chartData,div){
chart = new AmCharts.AmSerialChart();
//chart.pathToImages = "/lib/samples/javascript/images/";
chart.panEventsEnabled = true;
chart.zoomOutButton = {
backgroundColor: "#000000",
backgroundAlpha: 0.15
};
chart.dataProvider = chartData;
chart.validateData();
chart.categoryField = "data";
//设置横坐标;
var categoryAxis = chart.categoryAxis;
// categoryAxis.parsedatas = true; // as our data is data-based, we set parsedatas to true
// categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
//categoryAxis.dashLength = 1;
categoryAxis.gridAlpha = 0;
// categoryAxis.axisColor = "#DADADA";
// categoryAxis.gridCount = 15;
//categoryAxis.autoGridCount = false;
// 设置纵坐标value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisColor = "#DADADA";
valueAxis.dashLength = 1;
//valueAxis.logarithmic = true; // this line makes axis logarithmic
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.type = "smoothedLine";
graph.bullet = "round";
graph.bulletColor = "#FFFFFF";
graph.bulletBorderColor = "#00BBCC";
graph.bulletBorderThickness = 2;
graph.bulletSize = 7;
graph.title = "Price";
graph.valueField = "price";
graph.lineThickness = 2;
graph.lineColor = "#00BBCC";
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// WRITE
var parent=document.getElementById(div);
while(parent.hasChildNodes()) //注意,此处需要清空div内容,以避免浏览器缓存上次的图形信息。
{
parent.removeChild(parent.firstChild);
}
chart.write(div);//画图到指定的div上
}
</script>
amcharts使用总结相关推荐
- Amcharts绑定新数据后不会刷新图表的解决办法
重新给Amcharts绑定数据源时,只需要改变 LineChart1.DataSource的属性,无需加上 DataBind() ,否则显示的还是绑定前的图表,或者提示这个时期没有数据:No data ...
- amcharts 网页绘图插件
Amcharts是一组js图表,你可以免费使用在你的网站和基于网络的产品(非开源). Amcharts可以从简单的json提取数据,也可以从动态数据读取生成,比如PHP, .NET, Ruby on ...
- Amcharts插件实现3D饼图
2019独角兽企业重金招聘Python工程师标准>>> 主要引入两个js文件: pie.js和amcharts.js 实现的效果如下: <!DOCTYPE HTML PUBLI ...
- Amcharts 柱状图和线形图
最近需要学习 Amcharts ,他的图表功能确实很强大.但是网上搜索到的教程很少,开始学起的确有点不方便.于是我决定把我学习的觉得好的途径,放到博客上. 下面的代码可以直接复制,但是文件要从官网上下 ...
- amcharts应用
查看选中的软件的下载量,通过amchart报表工具显示出软件日下载量,月下载量以及年下载量,下面简单介绍,amchart在struts2中的应用. amCharts提供JavaScript/HTML5 ...
- amcharts去除版权标志
打开amcharts.js, 查找drb, 找到后,将drb:function(){......}程序{}中间内容清空, 或者改成drb:function(){return;}
- amCharts 报表(转)
amCharts 是基于Flash的一套图表解决方法,界面比JFreeChart华丽很多,而且可以与用户交互,动画效果非常漂亮.官网:http://www.amcharts.com About AmC ...
- amcharts嵌入到flex中
amcharts是比较优秀的图表制作工具,它的效果是其他图表工具所无法比拟的.但是amcharts只给我们提示一组图表的控件,没有给我们良好的控制组件和其他的表现形式,但是flex却有丰富的组件可用, ...
- 统计图表导入word,用到echarts,highcharts,amcharts,jfreechart
功能介绍 需求由来 整理数据和图表,导入到一份规范化的word中 准备工作 需求并不是很明确,就先实现word导出,我采用的是freemarker 首先:搭建一个boot项目 添加pom中的包 < ...
- amcharts _ 2.7.6 实现动态数据展现
老版的amcharts是基于flash的,新版的是javascript实现的,同样amcharts 2.7.6支持页面动态数据展现. 以下是方法: 一.首先去http://amcharts.com/d ...
最新文章
- 一文看懂人工智能的发展速度到底有多快
- note js 创建项目_vue.js使用vuecli3快速创建项目
- 爬取小说 spider
- 如何让奇异值分解(SVD)变得不“奇异”?
- php 发那科,FANUC发那科CNC数据采集教程连接CNC
- STM32的GPIO为输出模式时获取其输出状态
- python s d是什意思_python里d是什么意思
- mysql bundle 安装_阿里云服务器下安装MySQL (Bundle压缩包 安装)
- 如何运行从github拉取的vue项目
- matlab lu解线性方程,LU分解和求解线性方程组
- 坚守13年的极飞,终靠“务农”拿下12亿融资!专访彭斌:要为行业找技术,而不是为技术找行业...
- windows 2000 密钥
- 【springboot】mybatis-generator配置
- html5 pc端 客户端 web端的区别,wap版、手机版以及web的区别
- 国产数据库普及风暴有奖征文获奖名单揭晓
- C++调用JSON-CPP库实现JSON字符串解析
- 解决AS3.5在oppo系统更新后无法打包apk问题
- Warning: Class ‘com.xxx.xxx‘ not found in module ‘xxxx‘
- 360重磅开源性能监控平台ArgusAPM
- 进程间的几种通信方式的比较和线程间的几种通信方式
热门文章
- 安装SQL server2017提示无法打开注册表项:“Software\Microsoft\MicrosoftsQL Server\140\Bootstrap“,注册表可能已损环。
- Java项目:人才管理系统(java+SpringBoot+FreeMarker+jpa+Mysql)
- 【NFC】手机手环模拟门禁卡
- STM32CubeMX下STM32单片机环境光传感器(ADC)
- codewars练习(javascript)-2021/3/16
- Phalcon框架的入门使用,Phalcon框架学习,编写简单的视图输出及数据库写入!
- 欧几里得gcd与拓展欧几里得exgcd
- 限制input 输入框只能输入数字
- 代码笔记源码php,读 PHP - Pimple 源码笔记(上)
- 读 PHP - Pimple 源码笔记(下)