FusionCharts 2D折线图

最新推荐文章于 2017-04-05 10:30:41 发布

iteye_8264

最新推荐文章于 2017-04-05 10:30:41 发布

阅读量107

点赞数

文章标签： javascript ViewUI

1、设计思路

（1）首先，了解FusionCharts中折线图的原理，数据源结构；

（2）然后，了解FusionCharts中图的共性以及折线图属性的特性；

（3）最后，开始设计折线图，JS等等。

2、设计步骤

（1）这里，我是写的静态页面，利用jQuery设计折线图的图类以及数据源的路径

$(function(){
                var line2D = new FusionCharts( "../script/Charts/Line.swf", "myChartId", "100%", "520", "0" );
                line2D.setXMLUrl("data/line2D.xml");
                line2D.render("line2DChart");   
            });

（2）设置数据源

<?xml version="1.0" encoding="UTF-8"?>
<chart caption='月收入' xAxisName='月份' yAxisName='收入' numberPrefix='￥' showValues='0' baseFont='微软雅黑' baseFontSize='12' 
       baseFontColor='#000000' outCnvBaseFont='宋体' outCnvBaseFontSize='14' outCnvBaseFontColor='#FF0000' showToolTip='1' 
       toolTipBgColor='#0000FF' toolTipBorderColor='#CCCCCC' showToolTipShadow='1' showBorder='0' numDivLines='8' divLineColor='#999999'
       divLineThickness='1' divLineAlpha='50' divLineIsDashed='1' divLineDashLen='1' divLineDashGap='1' showZeroPlaneValue='1' 
       showAlternateHGridColor='1' palette='5' showAboutMenuItem='1' useEllipsesWhenOverflow='1' bgColor='#FFFFFF' bgAngle='90'
       canvasBorderColor='#777777' useRoundEdges='1' drawAnchors='1' anchorSides='4' anchorRadius='6' anchorBorderColor='#000000'
       anchorBorderThickness='1' anchorBgColor='#00FF00' anchorAlpha='50' anchorBgAlpha='50' numVDivLines='8'>

   <set label='一月' value='520000' />
   <set label='二月' value='120000' />
   <set label='三月' value='690000' />
   <set label='四月' value='865000' />
   <set label='五月' value='321400' />
   <set label='六月' value='984500' />
   <set label='七月' value='314500' />
   <set label='八月' value='945100' />
   <set label='九月' value='750000' />
   <set label='十月' value='128900' />
   <set label='十一月' value='620000' />
   <set label='十二月' value='880000' />

</chart>

（3）引入FusionCharts

 <body>
        <div id="line2DChart"></div>
 </body>

3、设计结果（如图所示）

iteye_8264

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
FusionCharts 2D折线图

1、设计思路（1）首先，了解FusionCharts中折线图的原理，数据源结构；（2）然后，了解FusionCharts中图的共性以及折线图属性的特性；（3）最后，开始设计折线图，JS等等。2、设计步骤（1）这里，我是写的静态页面，利用jQuery设计折线图的图类以及数据源的路径$(function(){ var line2D = new...
复制链接

扫一扫