zoukankan      html  css  js  c++  java
  • fushioncharts 使用教程要点---使用JSON数据方式

    1.建立图表步骤:

    A.下载fushionChart,引入FusionCharts.js和FusionChartsExportComponent.js文件

    B.建立图表对象

    var chart1 = new FusionCharts(imgUrl, "chart1Id", "800", "400","0","1");

    param1:使用的flash文件的路径

    param2:对象ID

    param3:图表长

    param4:图表高

    param5:是否显示Debug信息

    param6:使用图片导出时需置为1

    C:设置图表对象对应XML内容

    使用JSON数据,拼接为XML格式数据

    XML格式如下

    //简单格式
    
    <chart caption='省份-营收饼图' xAxisName='省份' yAxisName='营收' baseFont='宋体' baseFontSize='12' exportEnabled='1' exportAtClient='1' exportHandler='fcExporter1' >
    <set name='广东' value='14.9' />
    <set name='湖南' value='3.3' />
    </chart>
    
    //复杂格式 双Y轴
    <chart palette='2' caption='自定义图表' rotateNames='0' showValues='1' divLineDecimalPrecision='1' limitsDecimalPrecision='1'   formatNumberScale='1' exportEnabled='1' exportAtClient='1' exportHandler='fcExporter1'>
    <categories> //x轴值 dataset中的值个数需与之一致
    <category label='2015第2季度' /> 
    <category label='2015第3季度' />
     </categories> 
    <dataset  renderAs='Line' parentYAxis='S' seriesName='用户数量'>
    <
    set value='4' /> <set value='1' /> </dataset> <dataset renderAs='Line' parentYAxis='S' seriesName='人均消费金额'> <set value='3.725' /> <set value='3.3' /> </dataset> </chart>

    将拼接好的字符串设置-->

    chart1.setDataXML(strXML);  

    strXML为拼接好的XML字符创

    D:render至DIV中

    chart1.render("container");  container为html中id为此的div空标签

    至此,图表建立完毕,接下来进行图表的导出

    2.图表的导出

    A:在拼接的字符串中的chart元素中,增加属性exportEnabled='1' exportAtClient='1' exportHandler='fcExporter1' 

    B:在图表render之后代码下,配置导出图表的对象及按钮样式

    var myExportComponent = new FusionChartsExportObject("fcExporter1", "/adminthemes/FusionCharts/FCExporter.swf");  //该flase文件是固定路径,第一个参数要与chart元素属性exportHandler一致
    myExportComponent.componentAttributes.btnColor = 'EAF4FD';
    myExportComponent.componentAttributes.btnBorderColor = '0372AB';
    myExportComponent.componentAttributes.btnFontFace = 'Verdana';
    myExportComponent.componentAttributes.btnFontColor = '0372AB';
    myExportComponent.componentAttributes.btnFontSize = '12';
    //Title of button
    myExportComponent.componentAttributes.btnsavetitle = '另存为'
    myExportComponent.componentAttributes.btndisabledtitle = '右键生成图片';
    myExportComponent.Render("fcexpDiv");

    至此,导出亦可以使用,不过有个Bug,当对此调用这个myExportComponent对象时候,第二次将无法使用

    对此,我找遍百度也没找到解决方式,最后,自己观察这控件自动生成的代码得出结论,将自动生成的object标签的id更改为第一次载入的时候的id即可,即:

    //更改object标签id使之初始化
    $("#fcexpDiv object").attr("id","fcExporter1");

    只有这样,object标签才会初始化,而通过删除其自动生成的代码并无法正在初始化,原因不明.

  • 相关阅读:
    再也不用为word 中表达式的上标和下标发愁了
    创建链接
    ps钢笔工具隐藏的知识。
    学Ps个人遇到的小细节
    新手琢磨ps,学问深着呢。。
    数据库2012终于知道数据库攻击注入参数
    想脱离鼠标,不想要鼠标就只想用键盘完成所有编程,你说可能吗?
    vs2013中的快捷键
    如何在C/C++中动态分配二维数组【转载】
    转载:C++的那些事:表达式与语句
  • 原文地址:https://www.cnblogs.com/fanglorry/p/4633071.html
Copyright © 2011-2022 走看看