本文实例讲述了jQuery插件FusionCharts绘制2 d环饼图效果。分享给大家供大家参考,具体如下:
1,静态页面index . html:
& lt; !DOCTYPE html公共”——//W3C//DTD html 4.01过渡//EN”
“http://www.w3.org/TR/html4/loose.dtd”在
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;charset=utf - 8”比;
& lt; title> FusionCharts Doughnut2D
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/jquery-1.7.2.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/FusionCharts/FusionCharts.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
$(函数(){
var doughnut2D=new FusionCharts (“FusionCharts/doughnut2D。主权财富基金”、“doughnut2DId”、“100%”、“540”、“0”);
doughnut2D.setXMLUrl (“doughnut2D.xml”);
doughnut2D.render (“doughnut2DChart”);
});
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=" doughnut2DChart "祝辞& lt;/div>
& lt;/body>
& lt;/html>
2, XML数据源doughnut2D.xml:
& lt; & # 63; xml version=" 1.0 " encoding=" utf - 8 " & # 63;比;
& lt;图表标题=' (jb51.net统计)一周收入“showPercentageValues=' 1 ' baseFont=拔⑷硌藕凇眀aseFontSize=' 16 '
baseFontColor=' # 00 ff00 ' showLegend=' 1 ' legendPosition=暗撞俊眑egendIconScale=' 0 '
legendBorderColor=' # 0000 ff ' legendShadow=' 1 ' legendAllowDrag=' 1 '比;
& lt;设置标签='星期一的价值=' https://www.yisu.com/zixun/895645 '/比;
& lt;设置标签='星期二' value=' https://www.yisu.com/zixun/154511 '/比;
& lt;设置标签='星期三' value=' https://www.yisu.com/zixun/562111 '/比;
& lt;设置标签='星期四' value=' https://www.yisu.com/zixun/451211 '/比;
& lt;设置标签='星期五的value=' https://www.yisu.com/zixun/356124 '/比;
& lt;设置标签='星期六的value=' https://www.yisu.com/zixun/754544 '/比;
& lt;设置标签='星期日的价值=' https://www.yisu.com/zixun/454212 '/比;
& lt;/chart>
之前
3,运行结果
jQuery插件FusionCharts绘制2 d环饼图效果示例【附演示源码】
