本文实例讲述了jQuery插件FusionCharts实现的三维柱状图效果。分享给大家供大家参考,具体如下:
<强> 1,实现源码:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> FusionCharts3D柱状图& lt;/title>
& lt;脚本src=" https://www.yisu.com/zixun/js/jquery-1.4.2.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/fusioncharts.js "祝辞& lt;/script>
& lt; style>
身体,html {
宽度:99%;
高度:98%;
字体类型:“arial圆太大胆”;
字体大小:12 px;
}
& lt;/style>
& lt; script>
$(文档)时函数(){
FusionCharts的。准备好(函数(){
var column3DChart=new FusionCharts ({
类型:“column3d”,
renderAt:“column3D”,
宽度:“1350”,
高度:“650”,
dataFormat: json,
数据源:{
"图":{
“标题”:“()一年收入统计”,
“xAxisName”:“月份”,
“yAxisName”:“收入明细”,
“paletteColors”:“# 0075 c2”,
“valueFontColor”:“# 000000”,
:“baseFont Helvetica Neue, Arial”,
“captionFontSize”:“16”,
“subcaptionFontSize”:“16”,
“subcaptionFontBold”:“1”,
“placeValuesInside”:“0”,
“rotateValues”:“1”,
“showShadow”:“0”,
“divlineColor”:“# 999999”,
“divLineIsDashed”:“1”,
“divlineThickness”:“1”,
“divLineDashLen”:“1”,
“divLineGapLen”:“1”,
“canvasBgColor”:“# ffffff”
},
“数据”:(
{
“标签”:“()一月”,
“价值”:“3689”
},
{
“标签”:“()二月”,
“价值”:“5874”
},
{
“标签”:“()三月”,
“价值”:“4512”
},
{
“标签”:“()四月”,
“价值”:“6785”
},
{
“标签”:“()五月”,
“价值”:“1568”
},
{
“标签”:“()六月”,
“价值”:“2745”
},
{
“标签”:“()七月”,
“价值”:“4758”
},
{
“标签”:“()八月”,
“价值”:“9652”
},
{
“标签”:“()九月”,
“价值”:“3425”
},
{
“标签”:“()十月”,
“价值”:“2014”
},
{
“标签”:“()十一月”,
“价值”:“3652”
},
{
“标签”:“()十二月”,
“价值”:“7421”
}
]
}
});
column3DChart.render ();
});
});
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=" column3D "祝辞& lt;/div>
& lt;/body>
& lt;/html>
之前
<强> 2,实现效果图:
jQuery插件FusionCharts实现的三维柱状图效果实例【附演示源码下载】
