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 ...
随机推荐
- VBA 一些用法
另存为txt格式: Sheets().Activate ActiveWorkbook.SaveAs Filename:="E:\etl_folder\", FileFormat:= ...
- ionic+cordova+angularJs
ionic+cordova+angularJs 这里详细介绍下如何用ionic+cordova+angularjs搭建自己的移动端app,包括环境搭建,框架使用等,具体项目已放置在github上,可下 ...
- ThinkPHP运算符与PHP运算符对照表
ThinkPHP运算符与PHP运算符对照表 ThinkPHP标签 说明及对应PHP标签 备注 eq 等于(=)(==:用于模板判断时) 可用于查询条件与模板判断 neq 不等于(!=) 可用于查询条件 ...
- 软件工程——四则运算3(C#)
一.设计思想 设计两个窗体,在第一个窗体中选择功能参数,在第二个窗体中显示所出题目. 二.源代码 Form1.cs: using System; using System.Collections.Ge ...
- dd面试经历
HR面:看了我的简历,说fe做的简历就是不一样哈哈好吧,然后随便问了点项目,又问了什么时候可以去实习,就没了.三面:基本数据结构.冒泡排序.数组去重.ie与主流浏览器事件绑定.垂直居中的css实现方 ...
- Bootstrap入门四:代码
1.内联代码 code: 通过 <code> 标签包裹内联样式的代码片段.灰色背景.灰色边框和红色字体. For example, <code><section>& ...
- web项目自动化测试方案预研
一. 网上方案整理 Watir.Watir-Webdriver.Selenium2.QTP区别 Waitr与Watir-WebDriver有什么区别? Watir是非常优秀的一款自动化测试工具.其使 ...
- Netsharp快速入门(之7) 基础档案(工作区1 向导创建工作区)
作者:秋时 杨昶 时间:2014-02-15 转载须说明出处 3.5 商品开发 3.5.1 创建部件工作区 3.5.1.1 工作区向导 1.打开平台工具,选择界面管理节点下的部件工作区 ...
- Codeforces Beta Round #69 (Div. 1 Only) C. Beavermuncher-0xFF 树上贪心
题目链接: http://codeforces.com/problemset/problem/77/C C. Beavermuncher-0xFF time limit per test:3 seco ...
- WebServices中Xml的序列化
一.定义序列化实体类 [System.Xml.Serialization.XmlRoot("Custome_Xml_Root_Name")] //自定义生成的Xml根目录名称 pu ...