组件 |
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”);
} |
例子 |
|
API |
http://docs.amcharts.com/3/ |
官网 |
http://www.amcharts.com/ |
转载请注明:赫非域 » ecology开发之jquery-amcharts组件