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



  • 相关阅读:
    Linux三剑客之sed深度实践讲解(上)
    Linux第三阶段题型测试
    Linux正则表达式题型
    linux文本处理三剑客命令及用法
    SSH服务协议、部署ssh、scp、sftp服务
    NFS客户端挂载及永久生效
    SSH实现无密码登录
    NFS深度解析及搭建同步NFS服务
    NFS文件系统及搭建NFS共享服务
    Linux系统磁盘管理
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315472.html
Copyright © 2011-2022 走看看