zoukankan      html  css  js  c++  java
  • FusionCharts 2D折线图

    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、设计结果(如图所示)



  • 相关阅读:
    360云盘、百度云、微云……为什么不出 OS X(Mac 端)应用呢?(用户少,开发成本高)(百度网盘Mac版2016.10.18横空出世)
    其实 Dropbox 的缺点也很明显,速度慢,空间小(我对国内的网盘的建议)
    为什么百度云、360云盘等都取消了同步盘功能?
    验证API
    操作系统进程压榨案例
    查询功能
    JavaScript 动画库和开发框架
    指针
    Attribute Routing
    自定义验证特性
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315472.html
Copyright © 2011-2022 走看看