通过jQuery或者js制作amcharts(AmCharts)图表如何给每个柱状图添加链接或者点击事件,感觉很难做,谢谢大家
系统能正常运行。
我的图表是这样的:

页面引用:

js代码:
单位:亿元
<div id="chartdiv" style="height: 350px;"></div>
<div id="taxNO">333</div>
<script type="text/javascript">
var chart;
var yiyue = $("#taxNO").text();
var chartData = [{
"country": "一月",
"visits": yiyue,
"color": "#FF0F00"
}, {
"country": "二月",
"visits": 188,
"color": "#FF6600"
}, {
"country": "三月",
"visits": 180,
"color": "#FF9E01"
}, {
"country": "四月",
"visits": 132,
"color": "#FCD202"
}, {
"country": "五月",
"visits": 112,
"color": "#F8FF01"
}, {
"country": "六月",
"visits": 111,
"color": "#B0DE09"
}, {
"country": "七月",
"visits": 98,
"color": "#04D215"
}, {
"country": "八月",
"visits": 71,
"color": "#0D8ECF"
}, {
"country": "九月",
"visits": 66,
"color": "#0D52D1"
}, {
"country": "十月",
"visits": 50,
"color": "#2A0CD0"
}, {
"country": "十一月",
"visits": 44,
"color": "#8A0CCF"
}, {
"country": "十二月",
"visits": 44,
"color": "#CD0D74"
}];
var chart = AmCharts.makeChart("chartdiv", {
type: "serial",
dataProvider: chartData,
categoryField: "country",
depth3D: 20,//3D效果的厚度
angle: 30,//3D效果的倾斜度
categoryAxis: {
labelRotation: 10,//月份显示宽度
gridPosition: "start"
},
valueAxes: [{
title: "",
}],
graphs: [{
valueField: "visits",
colorField: "color",
type: "column",
lineAlpha: 0,
fillAlphas: 1
}],
chartCursor: {
cursorAlpha: 0,
zoomable: false,
categoryBalloonEnabled: false
},
exportConfig: {
menuTop: "21px",
menuBottom: "auto",
menuRight: "21px",
backgroundColor: "#efefef",
menuItemStyle: {
backgroundColor: '#EFEFEF',
rollOverBackgroundColor: '#DDDDDD'
},
menuItems: [{
textAlign: 'center',
icon: '../amcharts/images/export.png',
onclick: function () { },
items: [{
title: 'JPG',
format: 'jpg'
}, {
title: 'PNG',
format: 'png'
}, {
title: 'SVG',
format: 'svg'
}, {
title: 'PDF',
format: 'pdf'
}]
}]
}
});
</script>
我的图表是这样的:

页面引用:

js代码:
单位:亿元
<div id="chartdiv" style="height: 350px;"></div>
<div id="taxNO">333</div>
<script type="text/javascript">
var chart;
var yiyue = $("#taxNO").text();
var chartData = [{
"country": "一月",
"visits": yiyue,
"color": "#FF0F00"
}, {
"country": "二月",
"visits": 188,
"color": "#FF6600"
}, {
"country": "三月",
"visits": 180,
"color": "#FF9E01"
}, {
"country": "四月",
"visits": 132,
"color": "#FCD202"
}, {
"country": "五月",
"visits": 112,
"color": "#F8FF01"
}, {
"country": "六月",
"visits": 111,
"color": "#B0DE09"
}, {
"country": "七月",
"visits": 98,
"color": "#04D215"
}, {
"country": "八月",
"visits": 71,
"color": "#0D8ECF"
}, {
"country": "九月",
"visits": 66,
"color": "#0D52D1"
}, {
"country": "十月",
"visits": 50,
"color": "#2A0CD0"
}, {
"country": "十一月",
"visits": 44,
"color": "#8A0CCF"
}, {
"country": "十二月",
"visits": 44,
"color": "#CD0D74"
}];
var chart = AmCharts.makeChart("chartdiv", {
type: "serial",
dataProvider: chartData,
categoryField: "country",
depth3D: 20,//3D效果的厚度
angle: 30,//3D效果的倾斜度
categoryAxis: {
labelRotation: 10,//月份显示宽度
gridPosition: "start"
},
valueAxes: [{
title: "",
}],
graphs: [{
valueField: "visits",
colorField: "color",
type: "column",
lineAlpha: 0,
fillAlphas: 1
}],
chartCursor: {
cursorAlpha: 0,
zoomable: false,
categoryBalloonEnabled: false
},
exportConfig: {
menuTop: "21px",
menuBottom: "auto",
menuRight: "21px",
backgroundColor: "#efefef",
menuItemStyle: {
backgroundColor: '#EFEFEF',
rollOverBackgroundColor: '#DDDDDD'
},
menuItems: [{
textAlign: 'center',
icon: '../amcharts/images/export.png',
onclick: function () { },
items: [{
title: 'JPG',
format: 'jpg'
}, {
title: 'PNG',
format: 'png'
}, {
title: 'SVG',
format: 'svg'
}, {
title: 'PDF',
format: 'pdf'
}]
}]
}
});
</script>
...全文
相关推荐
基于amcharts插件3d柱状图效果.zip
基于amcharts插件3d柱状图一种简单效果。
amcharts图表工具
国内各大网站都在使用,最全最简单的图表统计,纯JS生成,只需要传入JSON数据就可在页面动态绘制。 折线图、柱状图、饼图等多种图形。2D和3D效果都有,内有dome一看就会,方便项目集成。
Amcharts的jquery.js
Java页面展示柱状图、折线图、饼状图所需js,Amcharts
amCharts开发实例
amCharts开发实例主要是ASP.net开发过程中图表分析相关实例,包你一看就会
jquery图表插件收集jquery图表插件收集
jquery图表插件收集jquery图表插件收集jquery图表插件收集


