最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery插件FusionCharts实现的3D柱状图效果实例,附demo源码下载
时间:2017-05-20 编辑:简简单单 来源:一聚教程网
1、实现源码:
代码如下 | 复制代码 |
body,html{ width:99%; height: 98%; font-family:"arial rounded mt bold"; font-size: 12px; }
$(document).ready(function(){ FusionCharts.ready(function() { varcolumn3DChart =newFusionCharts({ type:'column3d', renderAt:'column3D', width:'1350', height:'650', dataFormat:'json', dataSource: { "chart": { "caption":"(脚本之家)一年收入统计", "xAxisName":"月份", "yAxisName":"收入明细", "paletteColors":"#0075c2", "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" }, "data": [ { "label":"(脚本之家)一月", "value":"3689" }, { "label":"(脚本之家)二月", "value":"5874" }, { "label":"(脚本之家)三月", "value":"4512" }, { "label":"(脚本之家)四月", "value":"6785" }, { "label":"(脚本之家)五月", "value":"1568" }, { "label":"(脚本之家)六月", "value":"2745" }, { "label":"(脚本之家)七月", "value":"4758" }, { "label":"(脚本之家)八月", "value":"9652" }, { "label":"(脚本之家)九月", "value":"3425" }, { "label":"(脚本之家)十月", "value":"2014" }, { "label":"(脚本之家)十一月", "value":"3652" }, { "label":"(脚本之家)十二月", "value":"7421" } ] } }); column3DChart.render(); }); });
|
2、实现效果图:
相关文章
- jQuery中Chosen三级联动功能实例代码 06-03
- jQuery插件FusionCharts绘制的3D饼状图效果实例,附demo源码下载 05-18
- 基于jQuery实现弹幕APP的实例代码 03-27
- Jquery实时监听input value的实例 03-08
- jquery 实现复选框的全选操作实例代码 03-07
- jQuery插件JWPlayer视频播放器用法实例分析 01-12