本文实例讲述了jQuery插件FusionCharts绘制二维柱状图和折线图的组合图效果。分享给大家供大家参考,具体如下:
<强> 1,设计思路
(1)了解组合图的特性以及用法,选用图的类型;
(2)设计出两根柱子和两根折线,分开展示。
<强> 2,设计步骤
(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> FuionCharts二维柱状图和折线图组合图& lt;/title>
& 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 column2DLine=new FusionCharts (“FusionCharts/MSCombi2D。主权财富基金”、“doubleAreaId”、“100%”、“540”、“0”);
column2DLine.setXMLUrl (“columnLine.xml”);
column2DLine.render (“columnLine”);
}）;
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=" columnLine "祝辞& lt;/div>
& lt;/body>
& lt;/html>
之前
(2)设计出数据源columnLine.xml:
& lt; & # 63; xml version=" 1.0 " encoding=" utf - 8 " & # 63;比;
& lt;图表标题=' (jb51.net统计)2013 - 2016年某人年收入详细的xAxisName=霸路荨皔AxisName=笆杖搿皊howValues=' 0 '
baseFont='微软雅黑' baseFontSize=?4”baseFontColor=? 00 ff00”outCnvBaseFont=八翁濉?
outCnvBaseFontSize=20 ' outCnvBaseFontColor=' # 0000 ff的祝辞
& lt; categories>
& lt;类别标签='一月'/比;
& lt;类别标签='二月'/比;
& lt;类别标签='三月'/比;
& lt;类别标签='四月'/比;
& lt;类别标签='五月'/比;
& lt;类别标签='六月'/比;
& lt;类别标签='七月'/比;
& lt;类别标签='八月'/比;
& lt;类别标签='九月'/比;
& lt;类别标签='十月'/比;
& lt;类别标签='十一月”/比;
& lt;类别标签='十二月”/比;
& lt;/categories>
& lt;数据集seriesName=' 2013 '比;
& lt;集值=' https://www.yisu.com/zixun/59845 '/比;
& lt;集值=' https://www.yisu.com/zixun/36562 '/比;
& lt;集值=' https://www.yisu.com/zixun/15421 '/比;
& lt;集值=' https://www.yisu.com/zixun/56213 '/比;
& lt;集值=' https://www.yisu.com/zixun/45121 '/比;
& lt;集值=' https://www.yisu.com/zixun/56232 '/比;
& lt;集值=' https://www.yisu.com/zixun/56121 '/比;
& lt;集值=' https://www.yisu.com/zixun/23565 '/比;
& lt;集值=' https://www.yisu.com/zixun/85656 '/比;
& lt;集值=' https://www.yisu.com/zixun/45421 '/比;
& lt;集值=' https://www.yisu.com/zixun/23561 '/比;
& lt;集值=' https://www.yisu.com/zixun/24801 '/比;
& lt;/dataset>
& lt;数据集seriesName=' 2014 ' renderAs=摺?
& lt;集值=' https://www.yisu.com/zixun/56122 '/比;
& lt;集值=' https://www.yisu.com/zixun/65121 '/比;
& lt;集值=' https://www.yisu.com/zixun/45154 '/比;
& lt;集值=' https://www.yisu.com/zixun/20120 '/比;
& lt;集值=' https://www.yisu.com/zixun/95656 '/比;
& lt;集值=' https://www.yisu.com/zixun/46522 '/比;
& lt;集值=' https://www.yisu.com/zixun/65323 '/比;
& lt;集值=' https://www.yisu.com/zixun/62311 '/比;
& lt;集值=' https://www.yisu.com/zixun/95656 '/比;
& lt;集值=' https://www.yisu.com/zixun/65322 '/比;
& lt;集值=' https://www.yisu.com/zixun/74545 '/比;
& lt;集值=' https://www.yisu.com/zixun/56231 '/比;
& lt;/dataset>
& lt;数据集seriesName=' 2015 '比;
& lt;集值=' https://www.yisu.com/zixun/95656 '/比;
& lt;集值=' https://www.yisu.com/zixun/54132 '/比;
& lt;集值=' https://www.yisu.com/zixun/45511 '/比;
& lt;集值=' https://www.yisu.com/zixun/23200 '/比;
& lt;集值=' https://www.yisu.com/zixun/65622 '/比;
& lt;集值=' https://www.yisu.com/zixun/32600 '/比;
& lt;集值=' https://www.yisu.com/zixun/54512 '/比;
& lt;集值=' https://www.yisu.com/zixun/56232 '/比;
& lt;集值=' https://www.yisu.com/zixun/26562 '/比;
& lt;集值=' https://www.yisu.com/zixun/45421 '/比;
& lt;集值=' https://www.yisu.com/zixun/52211 '/比;
& lt;集值=' https://www.yisu.com/zixun/65623 '/比;
& lt;/dataset>
& lt;数据集seriesName=' 2016 ' renderAs=摺?
& lt;集值=' https://www.yisu.com/zixun/56444 '/比;
& lt;集值=' https://www.yisu.com/zixun/65232 '/比;
& lt;集值=' https://www.yisu.com/zixun/12123 '/比;
& lt;集值=' https://www.yisu.com/zixun/21222 '/比;
& lt;集值=' https://www.yisu.com/zixun/78454 '/比;
& lt;集值=' https://www.yisu.com/zixun/56211 '/比;
& lt;集值=' https://www.yisu.com/zixun/42422 '/比;
& lt;集值=' https://www.yisu.com/zixun/95655 '/比;
& lt;集值=' https://www.yisu.com/zixun/45455 '/比;
& lt;集值=' https://www.yisu.com/zixun/95656 '/比;
& lt;集值=' https://www.yisu.com/zixun/22900 '/比;
& lt;集值=' https://www.yisu.com/zixun/41512 '/比;
& lt;/dataset>
& lt;/chart>
