amcharts属性

Amcharts的特点包含:

*动画或静态
*价值轴能够扭转
*线性或对数轴的价值尺度
*提前定义或定制的子弹
*定制描写叙述不论什么数据点
*点击栏目/酒吧（可用于钻孔下来图表）
*梯度弥漫
*价值指标插入式
*轴价值观内样区
*平台无关
*能够输出作为一项形象
*可控制在途经的JavaScript
*设置和数据能够通过直接从一个HTML文件
*度身定做的形象或Flash （动画）背景
*无限标签
*旋转标签及轴价值观
*数据可自己主动重装上阵与预设频率
*不论什么格式文本气球

ColumnChart

Axes 轴设置

CategoryAxisAlpha //x轴坐标线透明度

CategoryAxisColor //x轴坐标线颜色

CategoryAxisTickLength // x轴坐标刻度线的延长线

CategoryAxisWidth //x轴坐标线的厚度

ValueAxisAlpha //y轴（值）坐标线透明度

ValueAxisAlpha //y轴坐标线颜色

ValueAxisLogarithmic //false 为线性刻度，true为对数刻度

Balloons //弹出数据指示框的设置

BalloonAlpha //弹出框的透明度

BalloonBorderAlpha //弹出框边框

BalloonBorderColor //弹出框边框的颜色

BalloonEnabled // 弹出框是否可用

Column //柱状图的柱子的设置

ColumnBalloonTextFormatString //当鼠标移动到柱子时弹出的标签 {value} 为y轴坐标值

ColumnBorderAlpha //柱子的边框

ColumnDataLabelFormatString //柱子的数据文本标签

ColumnDataLabelTextPosition //柱子数据标签的位置

ColumnGradientDirection //柱子数据标签的

ColumnGrowEffect //柱子的动画效果

ColumnHoverBrightness //指示柱子时柱子的亮暗变化

ColumnSequencedGrow //柱子是同一时候展示，还是一根接一根

ColumnSpacing //同一坐标点的柱子的间距

Columntype //柱子的结构

ColumnWidth //两个坐标点间柱子的间隔百分比，100为没有间隔

Context Menu //右键菜单

ContextMenuItems //用户自己定义可选项

ShowPrintContextMenu //打印功能

ShowZoomcontextMenu //缩放功能

Error messages //错误信息、

Externals // 数据绑定设置

DataType // 绑定数据类型

ExternalDataFileUrl //数据文件地址

ExternalSettingsFileUrl //设置文件地址

ReloadDataInterval //刷新数据间隔

Grid //网格线

CategoryGridDashed //网格竖线是否连续

CategoryValuesColor //x轴坐标文本的颜色

CategoryVluesEnabled //x轴坐标文本是否显示

CategoryValuesFrequency //x轴文本显示的网格线比例

CategoryValuesInside //x轴文本是否显示在网格内

ValueGridAlpha //y轴坐标

ValuesInside //y轴坐标显示在网格内外

Guides //显示栏线

Image export //图片导出

Legend //图标

LegendAlign //图表对齐位置

Line //曲线

AreaFillAlpha //曲线下的面积透明度

Bullet //曲线点的标记

LineBalloonTextFormatString //曲线弹出框显示的值

Margins //边距

Plot area //图形区

Strings //字符串

DataSourceID //绑定数据控件

DataSeriesIdField //x轴坐标数据

Graphs //单个图表设置

Angle 3D图的角度

BackColor 控件背景色

Labels //图表标记

效果图片：

实现代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>My JSP 'index.jsp' starting page</title>
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script><script type="text/javascript">var chart;var chartData = [ {"country" : "USA","visits" : 4025}, {"country" : "China","visits" : 1882}, {"country" : "Japan","visits" : 1809}, {"country" : "Germany","visits" : 1322}, {"country" : "UK","visits" : 1122}, {"country" : "France","visits" : 1114}, {"country" : "India","visits" : 984}, {"country" : "Spain","visits" : 711}, {"country" : "Netherlands","visits" : 665}, {"country" : "Russia","visits" : 580}, {"country" : "South Korea","visits" : 443}, {"country" : "Canada","visits" : 441}, {"country" : "Brazil","visits" : 395}, {"country" : "Italy","visits" : 386}, {"country" : "Australia","visits" : 384}, {"country" : "Taiwan","visits" : 338}, {"country" : "Poland","visits" : 328} ];AmCharts.ready(function() {// SERIAL CHARTchart = new AmCharts.AmSerialChart();chart.dataProvider = chartData;chart.categoryField = "country";//动画特效 延迟时间 秒chart.startDuration = 0.3;//3Dchart.angle = 30;chart.depth3D = 15;// AXES// categoryvar categoryAxis = chart.categoryAxis;categoryAxis.labelRotation = 90;categoryAxis.gridPosition = "start";// value// in case you don't want to change default settings of value axis,// you don't need to create it, as one value axis is created automatically.// GRAPHvar graph = new AmCharts.AmGraph();graph.valueField = "visits";graph.balloonText = "[[category]]: <b>[[value]]</b>";//图形样式graph.type = "column";graph.lineAlpha = 0;graph.fillAlphas = 0.8;chart.addGraph(graph);// CURSORvar chartCursor = new AmCharts.ChartCursor();chartCursor.cursorAlpha = 0;chartCursor.zoomable = false;chartCursor.categoryBalloonEnabled = false;chart.addChartCursor(chartCursor);chart.creditsPosition = "top-right";chart.write("chartdiv");});function reloadData(url) {var dynamicData = loadStringData(url);chart.dataProvider = eval('(' + dynamicData + ')');chart.validateNow();chart.validateData();}//function loadStringData(link) {//return chartData2;if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safarivar request = new XMLHttpRequest();} else {// code for IE6, IE5var request = new ActiveXObject('Microsoft.XMLHTTP');}// loadrequest.open('GET', link, false);request.send();return request.responseText;}//能够获得 URL 的主机部分var hostName = window.location.host;window.setInterval("reloadData('http://" + hostName+ "/amcharts/charts/test')", 1000);
</script>
</head><body><div id="chartdiv" style="width: 100%; height: 400px;"></div>
</body></html>

转载于:https://www.cnblogs.com/mqxnongmin/p/10542951.html

amcharts属性相关推荐

jenkins api java封装_Jenkins api java 调用
android development 1. Supporting different devices 1) Supporting different screen size 主要有几点,首先是布局文 ...
Amcharts绑定新数据后不会刷新图表的解决办法
重新给Amcharts绑定数据源时,只需要改变 LineChart1.DataSource的属性,无需加上 DataBind() ,否则显示的还是绑定前的图表,或者提示这个时期没有数据:No data ...
Amcharts 柱状图和线形图
最近需要学习 Amcharts ,他的图表功能确实很强大.但是网上搜索到的教程很少,开始学起的确有点不方便.于是我决定把我学习的觉得好的途径,放到博客上. 下面的代码可以直接复制,但是文件要从官网上下 ...
Armchart Js版属性学习与总结
一简介 amCharts 是一个致力于图表组件开发的公司,公司地址在立陶宛首都维尔纽斯,2004年开始推出图表和地图组件.截至目前,amCharts提供了JavaScript/HTML5 Charts ...
amcharts嵌入到flex中
amcharts是比较优秀的图表制作工具,它的效果是其他图表工具所无法比拟的.但是amcharts只给我们提示一组图表的控件,没有给我们良好的控制组件和其他的表现形式,但是flex却有丰富的组件可用, ...
amCharts下的JS图表
amCharts下的JS图表JavaScript/HTML5 Charts是免费且兼容性好的JavaScript,HTML5图表开发工具,包括序列图表(列型图,条形图,线型图,面积图,步骤折线图,平滑 ...
path png转svg_SVG2PNG(前台和后台将SVG转换为PNG)--amcharts导出png
在项目中用到了amcharts,amcharts图标统计插件是利用SVG实现的,其自带下载png功能,但是不支持IE以下浏览器.因此研究了SVG转换为png,最终实现的效果是将amcharts生成一张 ...
[z]WPF中使用amCharts绘制股票K线图
http://dotnet.cnblogs.com/page/98448/ 摘要:本想自己用GDI绘图, 通过数据直接绘制一张蜡柱图, 但觉得这样子的功能比较少, 所以到网上搜索一些能画出K线图的控件 ...
kotlin中继承父属性使用构造方法
kotlin中继承父属性使用构造方法 1. 定义父类,给它两个属性: abstract class AbstractResponseMessage {private var success = tru ...
Python 类—类属性（私有属性、公有属性、实例属性、局部变量）类方法（实例方法、静态方法）
1. 创建类类是对某个对象的定义,它包含有关对象动作方式的信息,包括它的名称.方法.属性和事件.类不存在于内存中,因此它本身并不是对象.当程序运行需要引用类的代码时,就会在内存中创建一个类的新实例, ...

amcharts属性

amcharts属性相关推荐

最新文章

热门文章