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 CHART
		chart = new AmCharts.AmSerialChart();
		chart.dataProvider = chartData;
		chart.categoryField = "country";
		//动画特效 延迟时间 秒
		chart.startDuration = 0.3;
		//3D
		chart.angle = 30;
		chart.depth3D = 15;
		// AXES
		// category
		var 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.

		// GRAPH
		var 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);

		// CURSOR
		var 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, Safari
			var request = new XMLHttpRequest();
		} else {
			// code for IE6, IE5
			var request = new ActiveXObject('Microsoft.XMLHTTP');
		}
		// load
		request.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>

amcharts属性

时间: 2024-10-08 13:35:52

amcharts属性的相关文章

HTML5统计图表amCharts JavaScript 统计图控件详细介绍

amCharts控件提供您最需要的JavaScript/HTML5图表.一套包括串行(列,栏,线,区,步线,平滑线,烛台,OHLC图),馅饼 /甜甜圈,雷达/极性和XY /分散/气泡图.amCharts的图表提供了无与伦比的功能和性能,在一个高级的,符合标准的包里. 支持所有高级浏览器 amCharts的JavaScript图表支持所有高级浏览器(包括但不限于)现代火狐,Chrome,Safari,Opera和Internet Explorer的版本.它的iPad,iPhone,iPod Tou

Armchart Js版属性学习与总结

一.常用对象 1.valueAxis对象:表示图标的Y轴,使用方法:var valueAxis=new AmCharts.ValueAxis(); 2.categoryAxis对象:表示图表的X轴,用法:var categoryAxis=new AmCharts.categoryAxis(); 3.Legend对象:表示在图表的上方或者下方显示,图例的颜色就是对应线条的颜色,用法:var legend=new AmCharts.Legend(); 4.Guide对象:表示一条跟Y轴平行的线,或者

(转贴)fusionCharts属性参考API

一.FusionCharts的分类 关于FusionCharts的基本介绍我就不在这里浪费篇幅了,想了解的朋友自己去www.baigoogedu.com里面找吧.我就说说FusionCharts的官方四大分类: 1.FusionCharts 2.FusionMaps 3.FusionWidgets 4.PowerCharts 每种类型我还是贴个图吧(从左到右依次对应):     二.关于FusionCharts的FusionCharts 大 家知道了FusionCharts分类以后,就明白了Fu

Amcharts 柱状图和线形图

最近需要学习 Amcharts ,他的图表功能确实很强大.但是网上搜索到的教程很少,开始学起的确有点不方便.于是我决定把我学习的觉得好的途径,放到博客上. 下面的代码可以直接复制,但是文件要从官网上下载下来.官网地址:www.amcharts.com <html> <head> <title>My JSP 'index.jsp' starting page</title> <!-- 导入Amcharts js 库 --> <script s

WPF中使用amCharts绘制股票K线图

原文:WPF中使用amCharts绘制股票K线图 本想自己用GDI绘图, 通过数据直接绘制一张蜡柱图, 但觉得这样子的功能比较少, 所以到网上搜索一些能画出K线图的控件. 发现DynamicDataDisplay挺好的, 在它的开发截图里也发现可以绘制蜡柱图, 但文档好像做的不是很好, 不知道怎么用它来画, 在寻找它比较好的例子的时候发现有人推荐用amCharts绘制, 所以便去看了一下, 发现挺好用的, 效果如下: 准备工作 先要去这里下载amCharts Stock Chart for WP

SVG2PNG(前台个后台将SVG转换为PNG,完美支持IE8下载)--amcharts导出png

在项目中用到了amcharts,amcharts图标统计插件是利用SVG实现的,其自带下载png功能,但是不支持IE以下浏览器.因此研究了SVG转换为png,最终实现的效果是将amcharts生成一张png写入一个excel并提供下载. 1.SVG简介: SVG 意为可缩放矢量图形(Scalable Vector Graphics).说白了就是利用xml定义图形. SVG 使用 XML 格式定义图像. 例如一个简单的圆形: <html> <body> <h1>My fi

Vue.js学习笔记:属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

HTML5新增Canvas标签及对应属性、API详解(基础一)

知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签原型 <canvas width=”1000” height=”1000” id=”myCanvas”> 您的浏览器版本过低,不支持HTML5新增的canvas标签. </canvas> 使用js获取该画布,并指定对象 <script> Var canvasID = doc

CSS3 中的 box-sizing属性

语法: box-sizing: content-text | border-box | inherit; content-box(默认): 宽度和高度分别应用元素的内容框:在宽度和高度之外绘制元素的内边距和边框. border-box: 为元素设定的宽度和高度决定了元素的边框盒:就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制:通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度. inherit: 规定从父元素继承box-sizing属性的值. 示例: c