jQuery插件FusionCharts绘制2D双折线图效果示例【附演示源码】

本文实例讲述了jQuery插件FusionCharts绘制2D双折线图效果。分享给大家供大家参考，具体如下：

1、设计思路

(1)根据双折线图的特性和共性，设计出双折线图；

(2)设置数据源可扩展置标语言格式

2、设计步骤

(1)写出双折线引入的图类型和数据源路径

var双线=新fusion charts(' fusion charts/msline。swf '，' doubleLineId '，' 100% '，' 540 '，' 0 ')；双线。setxmlurl('双线。XML ')；双线。渲染('双折线图')；(2)设置双折线图的数据源doubleLine.xml:

？可扩展标记语言版本='1.0 '编码='UTF-8 '？图表标题='(jb51.net统计)2015和2016年某桥一周通过的人数xAxisName='星期' yAxisName='人数显示值='0 '基本字体='微软雅黑baseFontSize=' 14 ' baseFontColor=' # ff 0000 ' outnvbasefont='宋体outnvbasefontsize=' 20 ' outnvbasefontcolor=' # 00ff 00 ' legendShadow=' 1 ' legendAllowDrag=' 1 ' reverselevend=' 1 ' interactiveLegend=' 1 ' legendNumColumns=' 2 ' minimuewarpinlegend=' 1 ' showLegend=' 1 ' legendPosition=' BOTTOM ' showZeroPlane=' 1 '类别标签='星期一/类别标签='星期二/类别标签='星期三/类别标签='星期四/类别标签='星期五/类别标签='星期六/类别标签='星期日//categories数据集系列名称=' 2015 ' set value=' 656445 '/set value=' 412555 '/set value=' 956566 '/set value=' 125645 '/设置值=' 561124 '/设置值=' 265655 '/设置值=' 451212 '/数据集数据集系列名称=' 2016 '设置值=' 154512 '/设置值=' 554512 '引入双折线图

div id='双线图表/div 3，运行结果如下图：

4、源码

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML hearteta http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 ' title fusion charts 2D双折线图/title脚本类型=' text/JavaScript ' src=' http : jquery-1。7 .2 .量滴js/script脚本类型=' text/JavaScript ' src=' http : FusionCharts/FusionCharts。js/script脚本类型=' text/JavaScript ' $(function(){ var double line=new FusionCharts(' FusionCharts/msline。swf '，' doubleLineId '，' 100% '，' 544双线。setxmlurl('双线。XML ')；双线。渲染('双折线图')；});/script/head body div id=' double linechart '/div/body/html附：完整实例代码点击此处本站下载。

注：该源码需要放到服务器环境下运行！否则无法加载可扩展标记语言文件数据。

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。