最新消息:本站持续更新中,请注意添加收藏夹。搜索关键词时,多换一个同义词。比如要搜索界面,可以尝试页面,画面,PER档等词汇。善于搜索,将大大提高你的查找效率。

ecology开发之jquery-amcharts组件

底层代码 bron1984 7291浏览
组件 jquery-amcharts组件(图状组件)
功能说明 基于jQuery环形图状控件,其特点如下:
以各种图形化模式显示数据,直观。
使用说明 1.引入如下js
如果没有引入以下js,那么需要引入以下js:
<script src=”/js/jquery-amcharts/amcharts/amcharts_wev8.js” type=”text/javascript”></script>
2、页面指定一个显示区域
<div id=”chartdiv” style=”width: 300px; height: 400px;”></div>
3、当页面加载完成后,在页面上调用如下方法
$(document).ready(function() {
$.ajax({
type: “GET”,
url: “远程地址如:http://localhost:8080/amchartdata.action”,
success: function(msg){
//这里认为msg为json对象
//需要将json对象转换成类似上面的chartData变量的数组
var list = [];
for(var k in msg){
var data = {};
for(var k2 in msg[k]){
data[k2] = msg[k][k2];
}
list.push(data);
}

chartData = list;
createChart();
}
});
//如果是静态的数据,直接调用createChart();使用chartData变量。上面的远程调用去掉。
//createChart();
});
//创建柱状图
function createChart(){
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = “year”;
// this single line makes the chart a bar chart,
// try to set it to false – your bars will turn to columns
chart.rotate = true;
// the following two lines makes chart 3D
chart.depth3D = 20;
chart.angle = 30;

// AXES
// Category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridPosition = “start”;
categoryAxis.axisColor = “#DADADA”;
categoryAxis.fillAlpha = 1;
categoryAxis.gridAlpha = 0;
categoryAxis.fillColor = “#FAFAFA”;

// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisColor = “#DADADA”;
valueAxis.title = ” xx统计图”;
valueAxis.gridAlpha = 0.1;
chart.addValueAxis(valueAxis);

// GRAPH
var graph = new AmCharts.AmGraph();
graph.title = “Income”;
graph.valueField = “income”;
graph.type = “column”;
//graph.balloonText = “Income in [[category]]:[[value]]”;
graph.balloonText = “Income in [[category]]:[[value]]”;
graph.lineAlpha = 0;
graph.fillColors = “#bf1c25”;
graph.fillAlphas = 1;
chart.addGraph(graph);

// WRITE
chart.write(“chartdiv”);
}

例子
http://www.amcharts.com/demos/
API http://docs.amcharts.com/3/
官网 http://www.amcharts.com/

转载请注明:赫非域 » ecology开发之jquery-amcharts组件