amcharts图表使用总结
Amcharts JS 版属性/方法详细说明书
1、 坐标轴（Y轴）
序号 属性名/方法名 作用 对象获取方法/常用属性值 示例
1 valueAxis对象 图表的Y轴，一个图表中可以有多个Y轴 Var valueAxis = new AmCharts.ValueAxis();
2 axisColor 轴的颜色 valueAxis.axisColor = "#FF6600";
3 axisThickness 轴的宽度 valueAxis.axisThickness = 1;
4 gridAlpha 轴的透明度，值介于0-1之间，0全透明 valueAxis1.gridAlpha = 0.2;
5 tickLength 轴从下到上像左或右伸出来的延长线 valueAxis1.tickLength =0;
6 minimum 轴的最小值，如果不设置那么最小值根据数据动态变化 valueAxis1.minimum = -100;
7 maximum 轴的最大值，如果不设置那么最大值根据数据动态变化 valueAxis1.maximum = 100;
8 title 轴的名称 valueAxis1.title="哈哈";
9 logarithmic 是否为对数函数分布，一般轴的刻度是均匀划分的，当该属性设置为true的时候，刻度分布呈对数形式分布 valueAxis1.logarithmic = false;
10 integersOnly 是否只显示整数，如果为true轴的刻度只显示整数形式 valueAxis1.integersOnly = true;
11 gridCount 最大刻度个数 valueAxis1.gridCount = 10;
12 unit 单位 valueAxis1.unit = "%";
13 labelsEnabled 是否显示轴标签，默认值为true valueAxis1.labelsEnabled = true;
14 inside 轴的刻度值显示在表里面还是外面 valueAxis1.inside = true;
15 position 轴的位置，默认在左侧 valueAxis1.position = "left";
16 stackType valueAxis.stackType = "0%";
2、 categoryAxis（图表线，相当于X轴）
序号 属性名/方法名 作用 对象获取方法/常用属性值 示例
1 valueAxis对象 图表的线，一个图表中可以有多个，每个对应一个Y轴或者共同拥有一个Y轴 var categoryAxis = chart.categoryAxis;
2 parseDates 是否以日期为x轴的值 True、false categoryAxis.parseDates = false;
3 minPeriod 当以日期为x轴的时候x轴显示的最小范围 SS：分钟 DD：天 categoryAxis.minPeriod = "SS"
4 dashLength 破折线长度，默认为0是实心线 categoryAxis.dashLength = 1;
5 gridAlpha 网格的透明度，垂直x轴的刻度线形成网格 categoryAxis.gridAlpha = 0.15;
6 axisColor 轴的颜色 categoryAxis.axisColor = "#DADADA";
7 position 轴的位置，默认在最下方 top：显示在上方 left:左侧right：右侧 categoryAxis.position = "top";
8 gridPosition 网格位置 categoryAxis.gridPosition = "start";
9 startOnAxis 是否从轴上开始绘制，默认为false，即第一个点绘制是从中间开始的，当设置为true的时候，第一个点开始总是从Y轴上开始，结束总是在最后一个跟Y轴平行的轴上结束 true、false categoryAxis.startOnAxis = true;
10 gridColor 网格颜色 categoryAxis.gridColor = "#FFFFFF";
11 dateFormats 日期格式，将数据格式化成对应的日期格式 categoryAxis.dateFormats = [{ period:'DD', format: 'DD'},
{period:'WW', format: 'MMM DD'},
{period: 'MM',format:'MMM'}, period: 'YYYY',
format: 'YYYY'
}];
12
3、 Legend（图例）
序号 属性名/方法名 作用 对象获取方法/常用属性值 示例
1 legend对象 在图表的上方或者下方显示图例，图例的颜色就是对应线条的颜色 var legend = new AmCharts.AmLegend();
2 align 排列样式 center legend.align = "center";
3 marginLeft 左边缘 legend.marginLeft = 0;
4 title 标题 legend.title="测试";
5 horizontalGap 水平间隔，一个图表可以有多个图例，图例之间的间隔用此属性 legend.horizontalGap = 10;
6 equalWidths 是否等宽 legend.equalWidths = false;
7 valueWidth 值的宽度，在图例的右侧会显示该线或者图表的当前选中的值，设置为0时则不显示值 legend.valueWidth = 120;
8 switchType 暂时没明白什么意思 legend.switchType = "v";
4、 Guide（向导线）
序号 属性名/方法名 作用 对象获取方法/常用属性值 示例
1 guide对象 向导线可以是一条根Y轴平行的线，也可以是一个矩形区域 var guide = new AmCharts.Guide();
2 fillAlpha 区域透明度 guide.fillAlpha = 0.1;
3 lineAlpha 线透明度 guide.lineAlpha = 0;
4 value 其实值，其实指对应Y坐标的值 guide.value = 50;
5 toValue 到达值，其实指对应Y坐标的值，跟上面属性共同确定了一个从value到toValue的区域，宽度为图表的宽度，高度为（toValue-value）的绝对值 guide.toValue = 0;
6 lineColor 相导线的颜色 guide.lineColor = "#CC0000";
7 dashLength 破折长度，默认为0为实心线条，设置值后为破折线 guide.dashLength = 4;
8 label 标签，就是给向导线显示一个名字 guide.label = "平均值";
9 inside 是否让向导线显示在图形里面，默认为true True，false guide.inside = true;
5、 Scrollbar（滚动条）
序号 属性名/方法名 作用 对象获取方法/常用属性值 示例
1 scrollbar对象 滚动条可以选择图表显示的区域 var chartScrollbar = new AmCharts.ChartScrollbar();
3 backgroundAlpha 滚动条背景透明度 chartScrollbar.backgroundAlpha = 0.1;
4 backgroundColor 滚动条背景颜色 chartScrollbar.backgroundColor = "#000000";
5 graphLineAlpha 图像线条的透明度 chartScrollbar.graphLineAlpha = 0.1;
6 graphFillAlpha 图像的填充透明度 chartScrollbar.graphFillAlpha = 0;
7 selectedGraphFillAlpha 选中图像的填充色的透明度 chartScrollbar.selectedGraphFillAlpha = 0;
8 selectedGraphLineAlpha 选中区域的图像线条透明度 chartScrollbar.selectedGraphLineAlpha = 0.25;
9 scrollbarHeight 滚动条高度 chartScrollbar.scrollbarHeight = 30;
10 selectedBackgroundColor 选中区域的背景颜色 chartScrollbar.selectedBackgroundColor = "#FFFFFF";
6、 Graph (图表)
序号 属性名/方法名 作用 对象获取方法/常用属性值 示例
1 graph对象 图像对象，必须有该属性 var graph1 = new AmCharts.AmGraph();
2 valueAxis 图像的Y轴，一个chart可以添加多个graph，一个graph只能有一个valueAxis graph1.valueAxis = valueAxis1;
3 valueField 指定一个字段作为Y坐标值 graph1.valueField = "visits";
4 bullet 图像的节点类型 graph1.bullet = "round";
5 dashLength 绘制图像时延时，默认为0秒，设置为正整数时可以看到动态生成效果 graph1.dashLength = 0;
6 hideBulletsCount 一个图像中当节点大于一定数值后隐藏节点形状 graph1.hideBulletsCount = 10;
7 balloonText 节点显示的文本内容 graph1.balloonText = "[[date]] ([[visits]])";
8 lineColor 图像线颜色 graph1.lineColor = "#d1655d";
9 connect 是否连接起来，是指如果数据有x轴值，但是y轴值丢失的时候，如果设置为true则忽略该点，设置为false则线条在此点处断开 graph1.connect = false;
10 bulletBorderColor 节点边框颜色 graph1.bulletBorderColor = "#FFFFFF";
11 bulletBorderThickness 节点边框宽度 graph1.bulletBorderThickness = 2;
12 customBulletField 用户自定义节点字段 graph.customBulletField = "bullet";
13 bulletOffset 节点偏移量 graph.bulletOffset = 16;
14 cornerRadiusTop graph.cornerRadiusTop = 8;
15 bulletSize 节点大小 graph.bulletSize = 14;
16 colorField 颜色字段，颜色可以从数据中读取 graph1.colorField = "color";
17 type 图像类型，有line、column、smoothedLine类型，第一种为线形图，第二种为柱状图 line /column/smoothedLine graph1.type = "line";
18 fillAlphas 填充区透明度，默认为0，最大值为1，当设置值时，在线条跟x轴之间的区域会填充颜色 graph1.fillAlphas = 0.3;
19 negativeLineColor 当数值为负数时线条的颜色 graph1.negativeLineColor = "#efcc26";
7、 Chart （amcharts 对象）
序号 属性名/方法名 作用 对象获取方法/常用属性值 示例
1 chart对象 Amcharts 的核心对象 var chart = new AmCharts.AmSerialChart();
2 pathToImages 指定chart图片的引用地址 chart.pathToImages = "amcharts/images/";
3 zoomOutButton 设置放大/缩小按钮的背景色和透明度 chart.zoomOutButton = {
backgroundColor: '#000000',
backgroundAlpha: 0.15
};
4 dataProvider 指定数据来源，一般指向一个数组对象 chart.dataProvider = chartData;
5 categoryField 指定X轴由哪个字段决定 chart.categoryField = "date";
6 autoMargins 自动调整边距，如果设置为true则边距设置不起效 chart.autoMargins = true;
7 fontSize 字体大小 chart.fontSize = 14;
8 color 图标颜色 chart.color = "#FFFFFF";
9 marginTop 上边距 chart.marginTop = 100;
10 marginLeft 左边距 chart.marginLeft = 50;
11 marginRight 右边距 chart.marginRight = 30;
12 addGraph(graph) 添加一个图形，可以添加多个，想要绘制图形，必须有此方法 chart.addGraph(graph1);
13 validateNow（div） 当数据改变时或者属性改变时，想要重新绘图，可以调用该方法 chart.validateNow('chartdiv');
14 chart.write('chartdiv'); 将amcharts对象写到一个div中，最常用方法 chart.chart.write('chartdiv');;
15 addListener('dataUpdated', zoomChart) 添加一个监听函数，第一个参数是指定事件，第二个是调用的函数名 chart.addListener('zoomed', handleZoom); chart.addListener('dataUpdated', zoomChart);
16 rotate 图像是否xy轴互换，默认为false，如果想让图像顺时针旋转90°，则设置为true False，true chart.rotate = false;
17 depth3D 设置为3d图像的厚度值 chart.depth3D = 50
18 angle 角度，当设置图像为3d图时使用该属性，默认为0 chart.angle = 40
19 startDuration chart.startDuration = 2
20 plotAreaBorderColor 绘图区域边框颜色 chart.plotAreaBorderColor = "#000000";
21 plotAreaBorderAlpha 绘图区域边框透明度 chart.plotAreaBorderAlpha = 5;
22 backgroundImage 设置背景图片的地址 chart.backgroundImage = "amcharts/images/bg.jpg";
23 addChartScrollbar(chartScrollbar) 添加滚动条，只能添加一个 chart.addChartScrollbar(chartScrollbar);
24 addLegend(legend) 添加图例，可以添加多个 chart.addLegend(legend);
25 addValueAxis(valueAxis1) 添加Y轴。可以添加多个 chart.addValueAxis(valueAxis1);
26 addChartCursor(chartCursor) 添加鼠标形状 chart.addChartCursor(chartCursor);
27
28
29
30
31
32
8、 ChartCursor（光标）
序号 属性名/方法名 作用 对象获取方法/常用属性值 示例
1 chartCursor 对象 设置光标的形状和样式 var chartCursor = new AmCharts.ChartCursor();
2 zoomable 是否可以缩放，设为true的时候，按住鼠标左键划线可以方法图像 True/false chartCursor.zoomable = false;
3 cursorAlpha 光标透明度 chartCursor.cursorAlpha = 0;
4 cursorPosition 光标位置 chartCursor.cursorPosition = "mouse";
5 pan 默认为false，设置为true时，光标变为四个向外的箭头形状，按住左键滑动鼠标可以将图像向左移动向右移动 chartCursor.pan = true;
6 categoryBalloonDateFormat 设置光标节点显示的日期格式 chartCursor.categoryBalloonDateFormat = "JJ:NN, DD MMMM";
9、 动态图表示例
1、需要在html页面增加一个div，同时设置div的id和样式，amcharts将图表显示在指定的id的div中
<div id="chartdiv" style="width: 50%; height: 300px"></div>
2、引用amcharts js 库和css样式
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css">
3、设定一个定时器，循环调用函数
window.setInterval(show,2000);//每隔2秒调用一次show（）方法，show方法完成绘图功能
function show(){
var chart = new AmCharts.AmSerialChart();
var valueAxis1 = new AmCharts.ValueAxis();
var graph1 = new AmCharts.AmGraph();
var categoryAxis = chart.categoryAxis;
var guide = new AmCharts.Guide();
var legend = new AmCharts.AmLegend();
var chartCursor = new AmCharts.ChartCursor();
//设定最大显示数值个数
generateChartData();
chart.pathToImages = "amcharts/images/";
chart.zoomOutButton = {
backgroundColor: '#000000',
backgroundAlpha: 0.15
};
chart.dataProvider = chartData;
chart.categoryField = "date";
categoryAxis.parseDates = false; // as our data is date-based, we set parseDates to true
categoryAxis.dashLength = 1;
categoryAxis.gridAlpha = 0.15;
categoryAxis.axisColor = "#DADADA";
// categoryAxis.position = "top";
categoryAxis.gridPosition = "start";
categoryAxis.startOnAxis = true;
categoryAxis.gridColor = "#FFFFFF";
// CURSOR
chartCursor.zoomable = false; // as the chart displayes not too many values, we disabled zooming
chartCursor.cursorAlpha = 0;
chartCursor.cursorPosition = "mouse";
chartCursor.pan = true; // set it to fals if you want the cursor to work in "select" mode
chart.addChartCursor(chartCursor);
valueAxis1.axisColor = "#FF6600";
valueAxis1.axisThickness = 1;
valueAxis1.gridAlpha = 0;
valueAxis1.tickLength =0;
valueAxis1.minimum = -100;
valueAxis1.maximum = 100;
valueAxis1.title="哈哈";
valueAxis1.logarithmic = false; // this line makes axis logarithmic
valueAxis1.integersOnly = true;
valueAxis1.gridCount = 10;
valueAxis1.unit = "%";
valueAxis1.labelsEnabled = true;
valueAxis1.inside = true;
valueAxis1.position = "left";
chart.addValueAxis(valueAxis1);
// LEGEND
legend.align = "center";
legend.marginLeft = 0;
legend.title="测试";
legend.horizontalGap = 10;
legend.equalWidths = false;
legend.valueWidth = 120;
chart.addLegend(legend);
guide.fillAlpha = 0.1;
guide.lineAlpha = 0;
guide.value = 50;
guide.toValue = 0;
guide.lineColor = "#CC0000";
guide.dashLength = 4;
guide.label = "平均值";
guide.inside = true;
guide.lineAlpha = 1;
var guide1 = new AmCharts.Guide();
guide1.lineColor = "#CC0000";
guide1.lineAlpha = 1;
guide1.dashLength = 2;
guide1.inside = true;
guide1.labelRotation = 90;
categoryAxis.addGuide(guide1);
valueAxis1.addGuide(guide);
graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used
graph1.title = "红色";
graph1.valueField = "visits";
graph1.bullet = "round";
graph1.dashLength = 0;
graph1.hideBulletsCount = 10;
graph1.balloonText = "[[date]] ([[visits]])";
graph1.lineColor = "#d1655d";
graph1.connect = false;
graph1.negativeLineColor = "#efcc26";
graph1.bulletBorderColor = "#FFFFFF";
graph1.bulletBorderThickness = 2;
graph1.type = "smoothedLine"; // this line makes the graph smoothed line.
graph1.fillAlphas = 0.3; // setting fillAlphas to > 0 value makes it area graph
chart.addGraph(graph1);
chart.addTitle("测试动态报表图", 5);
chart.plotAreaBorderColor = "#000000";
chart.plotAreaBorderAlpha = 5;
chart.autoMargins = true;
chart.fontSize = 14;
chart.write('chartdiv');
chart=null;
valueAxis1 = null;
graph1 = null;
categoryAxis = null;
guide = null;
legend = null;
}
function generateChartData() {
$.ajax({
type : "get",
url : "${pageContext.request.contextPath}/getData",
dataType : "text",
data : {
},
success : function(result) {
parseData(result,20);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("请求异常，请检查服务器是否正常运行！" + XMLHttpRequest.status + " "
+ XMLHttpRequest.readyState + " " + textStatus);
}
});
}
function parseData(data,num){
var tempDate = [];
tempDate = data.split(" ");
chartData.push({
date:tempDate[0],
visits:tempDate[1]
});
var newChartData=[];
var len=chartData.length;
if(len>num){
for(var m=0;m<num;m++){
newChartData[m]=chartData[len-num+m];
}
chartData = newChartData;
newChartData=null;
}
len=null;
visits=null;
}
4、写一个servlet程序，给amcharts提供动态数据
public class DataProviderServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public static Integer i=0;
public DataProviderServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
StringBuilder sb = new StringBuilder();
sb.append(i++).append(" ").append(new Random().nextInt(100)*(i%2==0?(-1):(1)));
System.out.println(sb.toString());
response.getWriter().write(sb.toString());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
5、效果截图
amcharts图表使用总结相关推荐
- 《Wireshark网络分析从入门到实践》整理和总结
文字版排版较乱 有需要的请查看脑图版http://naotu.baidu.com/file/c74183f46a5c9ed21b48d95baa7bdc65?token=001e59b49f75637 ...
- Amcharts绑定新数据后不会刷新图表的解决办法
重新给Amcharts绑定数据源时,只需要改变 LineChart1.DataSource的属性,无需加上 DataBind() ,否则显示的还是绑定前的图表,或者提示这个时期没有数据:No data ...
- amCharts下的JS图表
amCharts下的JS图表JavaScript/HTML5 Charts是免费且兼容性好的JavaScript,HTML5图表开发工具,包括序列图表(列型图,条形图,线型图,面积图,步骤折线图,平滑 ...
- html5 js图片另存为,amCharts之JavaScript/HTML5 Charts应用教程二：将JS图表另存为图片...
通常,将JavaScript图表另存为图片是一个非常复杂的过程,但amCharts的 1.首先下载canvg 2.包括canvg.js, rbgcolor.js, amcharts.js以及以下扩展: ...
- amCharts图形控件清空图表内数据
很简单,分两步 一.清空图形 ColumnChart1.Graphs.Clear(); 二.清空数据 设置ColumnChart1的enableviewstate属性为false
- 适用于任何数据可视化需求的国外10个最佳JavaScript图表库
如今,数据量呈指数级增长,我们看到的信息越多,处理它的难度就越大.这就是为什么我们需要数据可视化--在图表和仪表板中,最好是交互式的.它帮助我们人类节省了大量时间和精力来查看,分析和理解数据,并根据这 ...
- 手绘风格的数据可视化 Sketchify，让你的图表也萌萌哒
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | naughty 来源 | oschina.ne ...
- AGS API for JavaScript 图表上地图
图1 图2 图3 -------------------------------------华丽丽的分割线----------------------------------- 图4 图5 --图片欣 ...
- amcharts 网页绘图插件
Amcharts是一组js图表,你可以免费使用在你的网站和基于网络的产品(非开源). Amcharts可以从简单的json提取数据,也可以从动态数据读取生成,比如PHP, .NET, Ruby on ...
- javascript高级程序设计pdf_2019年最好的JavaScript图表库
作者 | arthur puszynski 来源 | Medium 编辑 | 代码医生团队 首先,简要介绍一下: 随着数据收集和使用持续呈指数级增长,对这些数据进行可视化的需求变得越来越重要.开发人员 ...
最新文章
- 通过jQuery调用ASP.NET的AJAX
- 服务总线yali测试_中国信登加快技术测试体系建设支撑系统高质量运行
- Django 2.2 LTS 发布，长期支持版来了
- POJ 1840 Eqs 解方程式, 水题 难度:0
- 谈mvc开发中gzip压缩的应用
- 微软公司部署小型数据中心网络连接产品
- 职称考试取消英语和计算机,强烈建议取消所谓的英语职称和计算机考试
- mongodb报错 An error occurred while loading navigation: topology was destroyed
- setyear java_如何在Java中创建不可变类
- python中遇到的问题及解决方法_自己编程中遇到的Python错误和解决方法汇总整理...
- 电商实例、业务并发、网站并发及解决方法
- 快递单号查询国外公司编码汇总_快递鸟
- ios计算机错误,用iTunes更新IOS14失败，显示发生未知错误(4000)的简单解决办法！...
- 无源贴片晶振四角引脚_从贴片晶振脚位你看出什么信息？
- 【游戏开发实战】（完结）使用Unity制作水果消消乐游戏教程（九）：使用UGUI显示游戏UI
- 算法设计-天下会评选一级弟子
- 使用vue-admin-template搭建简单增删改查导入导出项目及CentOs服务器部署
- mysql按时间段统计_mysql按照时间段内 每天统计
- 《产品游戏化》电子书下载(epub+mobi+pdf) Netflix、迪士尼、微软巨头在使用的产品策略
- super关键字的用法