最近在项目中要用到amcharts,而且要求显示形式为双column,现举例如下:
function getPurchaseChart(){
$.get("income",{"areaId":"","flag":"4"},function(chartData){
$("#purchaseChartDiv").html("");
YSZE = 0;
ZXZE = 0;
ZXWCL = 0.0;
$.each(chartData,function(i,data){
$.each(data,function(key,value){
if(key=="YSZE"){
YSZE += value;
}else if(key=="ZXZE"){
ZXZE += value;
}
});
});
ZXWCL = ZXZE/YSZE;
$("#cgzb").html(YSZE);
$("#cgzx").html(ZXZE);
$("#cgzxwcl").html(ZXWCL);
$("#purchaseChartDiv").html("");
// SERIAL CHART
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "QXMC";
chart.startDuration = 1;
chart.colors = [ "#4470A5"];
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 0;
categoryAxis.gridPosition = "start";
// GRAPH,显示预算总额信息
var graph = new AmCharts.AmGraph();
graph.valueField = "YSZE";
graph.balloonText = "[[category]]: [[value]]";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 0.8;
graph.addListener("clickGraphItem", getTown2);
chart.addGraph(graph);
// GRAPH,显示执行总额信息
var graph1 = new AmCharts.AmGraph();
graph1.valueField = "ZXZE";
graph1.balloonText = "[[category]]: [[value]]";
graph1.type = "column";
graph1.lineAlpha = 0;
graph1.fillAlphas = 0.8;
graph1.addListener("clickGraphItem", getTown3);
chart.addGraph(graph1);
// LEGEND,定义图例信息
legend = new AmCharts.AmLegend();
legend.align = "center";
legend.position = "right";
legend.markerType = "square";
legend.valueWidth = 25;
legend.valueText = "[[close]]";
legend.labelText = "预算总额";
chart.addLegend(legend);
// legend1 = new AmCharts.AmLegend();
// legend1.align = "center";
// legend1.position = "right";
// legend1.markerType = "square";
// legend1.valueWidth = 25;
// legend1.valueText = "[[open]]";
// legend1.labelText = "执行总额";
// chart.addLegend(legend1);
chart.write("purchaseChartDiv");
});
}
其实就是添加两个GRAPH。