amcharts简单封装
只是简单是封装了一下,目前只能输出线图(折现,圆滑线等),柱状图。
代码如下:
;!function(win,$,AC,undefined){
var DDcharts = function(o){
this.o = $.extend(true,{},this.default_o,o);
if(this.o.type == 'serial'){
this.chart = this.AmSerialChart();
this.setCateGoryAxis().setValueAxis().setChartCursor().setAmLegend();
}
}; DDcharts.prototype = {
default_o:{
type:'serial', // 类型:折线、饼图等
dataProvider:{}, // 数据对象
categoryField:'date',
autoMargins:true,
marginTop:0,
marginRight:0,
marginBottom:0,
marginLeft:0,
startDuration:1, // 动画时间
write2where:'ddchart',
// 横轴
categoryAxis:{
parseDates:true,
minPeriod:'DD', // 最小时间:fff - milliseconds, ss - seconds, mm - minutes, hh - hours, DD - days, MM - months, YYYY - years.
inside:false,
fillAlpha:0.1, // 间隔区域透不明度
fillColor:'#cccccc', // 间隔区域填充颜色
labelRotation:0, // 刻度旋转角度
startOnAxis:0
},
// 纵轴
valueAxis:{
title:'', // 轴名称
axisAlpha:0,
dashLength:5
},
line:{
type:'line', // Possible values are: "line", "column", "step", "smoothedLine", "candlestick", "ohlc". XY and Radar charts can only display "line" type graphs.
valueField:'value',
hideBulletsCount:50
}
},
AmSerialChart:function(){
var chart = new AC.AmSerialChart();
chart.dataProvider = this.o.dataProvider;
chart.categoryField = this.o.categoryField;
chart.autoMargins = this.o.autoMargins;
chart.startDuration = this.o.startDuration;
if(this.o.autoMargins == false){
chart.marginTop= this.o.marginTop;
chart.marginRight= this.o.marginRight;
chart.marginBottom= this.o.marginBottom;
chart.marginLeft= this.o.marginLeft;
}
return chart;
},
// 设置横轴
setCateGoryAxis:function(){
var categoryAxis = this.chart.categoryAxis;
categoryAxis.parseDates = this.o.categoryAxis.parseDates; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = this.o.categoryAxis.minPeriod; // our data is daily, so we set minPeriod to DD
categoryAxis.inside = this.o.categoryAxis.inside;
categoryAxis.gridAlpha = 0; // 格子线不透明度 0 - 透明,1 - 不透明
categoryAxis.axisAlpha = 0; // 轴不透明度 0 - 透明,1 - 不透明
categoryAxis.fillAlpha = this.o.categoryAxis.fillAlpha;
categoryAxis.fillColor = this.o.categoryAxis.fillColor;
categoryAxis.labelRotation = this.o.categoryAxis.labelRotation;
categoryAxis.startOnAxis = this.o.categoryAxis.startOnAxis;
return this;
},
// 设置纵轴
setValueAxis:function(){
var valueAxis = new AC.ValueAxis();
valueAxis.axisAlpha = this.o.valueAxis.axisAlpha;
valueAxis.dashLength = this.o.valueAxis.dashLength;
valueAxis.title = this.o.valueAxis.title;
this.chart.addValueAxis(valueAxis);
return this;
},
// 添加鼠标滑过时的效果
setChartCursor:function(){
var chartCursor = new AC.ChartCursor();
this.chart.addChartCursor(chartCursor);
return this;
},
// LEGEND
setAmLegend:function(){
var legend = new AC.AmLegend();
legend.markerType = "square"; // Possible values are: "square", "circle", "line", "dashedLine", "triangleUp", "triangleDown", "bubble", "none".
this.chart.addLegend(legend);
},
// 增加折线
addLine:function(valueField,type,title){
var graph = new AC.AmGraph();
graph.type = type || this.o.line.type;
if(graph.type == 'column'){
graph.fillAlphas = 0.8;
}else{
graph.bullet = "round";
}
graph.valueField = valueField || this.o.line.valueField;
graph.title = title || graph.valueField;
graph.balloonText = "[[title]]: [[value]]";
graph.hideBulletsCount = this.o.line.hideBulletsCount; // this makes the chart to hide bullets when there are more than 50 series in selection
this.chart.addGraph(graph);
return this;
},
// 输出
write:function(write2where){
this.chart.write(write2where || this.o.write2where);
}
} win.DDcharts = DDcharts; }(this,jQuery,AmCharts);
使用实例(ddcharts.js为上述封装代码):
<!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="Public/js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Public/js/amcharts.js" type="text/javascript"></script>
<script src="Public/js/ddcharts.js" type="text/javascript"></script>
<script type="text/javascript">
var lineChartData = [{
date: new Date(2009, 10, 2),
value: 5,
value1:6
}, {
date: new Date(2009, 10, 3),
value: 15,
value1:16
}, {
date: new Date(2009, 10, 4),
value: 13,
value1:6
}, {
date: new Date(2009, 10, 5),
value: 17,
value1:36
}, {
date: new Date(2009, 10, 6),
value: 15,
value1:6
}, {
date: new Date(2009, 10, 9),
value: 19,
value1:2
}, {
date: new Date(2009, 10, 10),
value: 21,
value1:6
}, {
date: new Date(2009, 10, 11),
value: 20,
value1:11
}, {
date: new Date(2009, 10, 12),
value: 20,
value1:18
}, {
date: new Date(2009, 10, 13),
value: 19,
value1:12
}, {
date: new Date(2009, 10, 16),
value: 25,
value1:17
}, {
date: new Date(2009, 10, 17),
value: 24,
value1:19
}, {
date: new Date(2009, 10, 18),
value: 26,
value1:6
}, {
date: new Date(2009, 10, 19),
value: 27,
value1:2
}, {
date: new Date(2009, 10, 20),
value: 25,
value1:6
}, {
date: new Date(2009, 10, 23),
value: 29,
value1:61
}, {
date: new Date(2009, 10, 24),
value: 28,
value1:16
}, {
date: new Date(2009, 10, 25),
value: 30,
value1:2
}, {
date: new Date(2009, 10, 26),
value: 72,
value1:6,
customBullet: "images/redstar.png" // note, one line has a custom bullet defined
},
{
date: new Date(2009, 10, 27),
value: 43,
value1:32
}, {
date: new Date(2009, 10, 30),
value: 31,
value1:16
}, {
date: new Date(2009, 11, 1),
value: 30,
value1:16
}, {
date: new Date(2009, 11, 2),
value: 29,
value1:6
}, {
date: new Date(2009, 11, 3),
value: 27,
value1:3
}, {
date: new Date(2009, 11, 4),
value: 26,
value1:45
}]; $(function(){
var ddcharts = new DDcharts({dataProvider:lineChartData,categoryAxis:{inside:false,labelRotation:0},line:{type:'smoothedLine'}});
ddcharts.addLine().addLine("value1",'line').write('chartdiv');
});
</script>
</head> <body>
<div id="chartdiv" style="width:100%; height:400px;"></div>
</body> </html>
amcharts简单封装的更多相关文章
- Android AsyncTask 深度理解、简单封装、任务队列分析、自定义线程池
前言:由于最近在做SDK的功能,需要设计线程池.看了很多资料不知道从何开始着手,突然发现了AsyncTask有对线程池的封装,so,就拿它开刀,本文将从AsyncTask的基本用法,到简单的封装,再到 ...
- FMDB简单封装和使用
工具:火狐浏览器+SQLite Manager插件 ; Xcode; FMDB库; 效果: 项目地址: https://github.com/sven713/PackFMDB 主要参考这两篇博客: 1 ...
- Android--Retrofit+RxJava的简单封装(三)
1,继续接着上一篇的讲讲,话说如果像上一篇这样的话,那么我们每一次请求一个结构都要创建一堆的Retrofit对象,而且代码都是相同的,我们可以试试封装一下 先创建一个HttpMethods类,将Ret ...
- okhttp3 get post 简单封装
最近打算在新项目中使用 okhttp3, 简单封装了一下异步 get post 因为 CallBack 也是在子线程中执行,所以用到了 Handler public class MyOkHttpCli ...
- python网页请求urllib2模块简单封装代码
这篇文章主要分享一个python网页请求模块urllib2模块的简单封装代码. 原文转自:http://www.jbxue.com/article/16585.html 对python网页请求模块ur ...
- 对pymysql的简单封装
#coding=utf-8 #!/usr/bin/python import pymysql class MYSQL: """ 对pymysql的简单封装 "& ...
- iOS开发——UI篇OC篇&UITableView简单封装
UITableView简单封装 UITableView时iOS开发中使用最多也是最重的一个UI空间,其实在App Store里面的%80以上的应用都用到了这个控件,所以就给大家介绍一下,前面的文章中也 ...
- iOS sqlite 增删改查 简单封装(基于 FMDB)
/** * 对 sqlite 的使用进行简单封装,仅涉及简单的单表 增删改查 * * 基于 FMDB * * 操作基于 model ,数据库表字段与 model 属性一一对应,对 model 整 ...
- ADO简单封装(MFC)
简单封装了一下,不是很严谨. /************************************************************************/ /* INSTRUC ...
随机推荐
- KafkaOffsetMonitor使用方法
(1)下载jar包 去网上搜索KafkaOffsetMonitor即可. 我这里共享了我的百度云连接:http://yun.baidu.com/s/1nvGjbDn 如果某一天我这个取消共享了,大家去 ...
- GPIO初始化之PB3/PB4/PA13/PA14/PA15引脚的复用--寄存器版本
为了节省IO资源单片机会在一个IO上复用很多功能,一般的单片机用到 一个功能后就能再用两外复用的功能了,这就体现出了STM32 GPIO的强大功能了,我们用重映射的方法把其中一个外设映射到其他IO脚上 ...
- ionic+cordova+angularJs
ionic+cordova+angularJs 这里详细介绍下如何用ionic+cordova+angularjs搭建自己的移动端app,包括环境搭建,框架使用等,具体项目已放置在github上,可下 ...
- EF之外键Include() left join
项目中用EF实现外键查询出的数据, 查询数量正确, 但实现返回数据集数量不对 //DbContext.cs HasRequired(s => s.ClassRoom) .WithMany() . ...
- 关于 Google Chrome 中的全屏模式和 APP 模式
前言:我一直在纠结这篇文章是否应该归类在「前段开发」的范围内,哈哈! 前段时间做了一个项目,涉及到一个要全屏模式去访问网页的需求,因为 Google Chrome 的效率不错,而且专门为 Chrome ...
- Material
renderer.material 物理材质 实现二维图上的人物动作 新建Material,选择Shader(著色器)为transparent/diffuse(背景透明),将上图拉到背景图选项中. ...
- SL410K 在Ubuntu禁用触摸板
由于之前把系统自带的恢复去了,然后TouchPad一直不能禁用,而后我的410k就只装上ubuntu,想不到在ubuntu上,禁用/启用 触摸板这么方便. http://askubuntu.com/q ...
- 四则运算.html
<DOCTYPE html PUBLTC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- SqlServer Split函数
Create FUNCTION [dbo].[SplitToTable] ( @SplitString nvarchar(max), @Separator nvarchar(10)=' ' ) RET ...
- 【BZOJ】【1005】【HNOI2008】明明的烦恼
Prufer序列/排列组合+高精度 窝不会告诉你我是先做了BZOJ1211然后才来做这题的>_>(为什么?因为我以前不会高精度呀……) 在A了BZOJ 1211和1089之后,蒟蒻终于有信 ...