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    //图表标记

效果图片:amcharts属性

实现代码:

<%@ 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" : "*",
"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>
上一篇:java小程序(课堂作业02)


下一篇:Elasticsearch(八)【NEST高级客户端--分析器】