amcharts属性

最新推荐文章于 2024-04-26 09:45:06 发布

想牽某人

最新推荐文章于 2024-04-26 09:45:06 发布

阅读量8.9k

点赞数 1

分类专栏：插件文章标签： amcharts 树状图图表控件

本文链接：https://blog.csdn.net/ljfwl/article/details/28859625

版权

插件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

想牽某人

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
amcharts属性

Amcharts的特点包括:*动画或静态*价值轴能够扭转*线性或对数轴的价值尺度*预定义或定制的子弹*定制描述任何数据点*点击栏目/酒吧（可用于钻孔下来图表）*梯度弥漫*价值指标插入式*轴价值观内样区*平台无关*可以输出作为一项形象*可控制在途经的JavaScript*设置和数据可以通过直接从一个HTML文件*度身定做的形象或Flash
复制链接

扫一扫