fusionchars报表插件的使用

最新推荐文章于 2022-01-20 16:23:05 发布

sunyanchao33

最新推荐文章于 2022-01-20 16:23:05 发布

阅读量1.7k

点赞数

分类专栏： fusioncharts 文章标签：报表 fusioncharts

本文链接：https://blog.csdn.net/sunyanchao33/article/details/11085233

版权

fusioncharts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先看demo（明白自己想要什么）:http://www.fusioncharts.com/demos/gallery/#column-and-bar

下载地址:http://www.fusioncharts.com/download/trials/

下载成功后便可以在FusionChartsSuiteXTEval\FusionCharts XT\Code文件夹中选择自己合适的编程语言项目导入工程中运行

FusionChartsSuiteXTEval\FusionCharts XT\Code\MyFirstChart中是一些简单的例子，大家可以打开里面的html文件看看怎么运行的

下面描述下如何创建自己的第一个报表:

1.创建一个LearningFusionCharts文件夹作为第一个chart例子的根目录.

2.在LearningFusionCharts再建一个MyFirstChart文件夹,然后在MyFirstChart中创建FusionCharts文件夹

3.将FusionChartsSuiteXTEval\FusionCharts XT\Charts目录下的Column3D.swf, FusionCharts.js,FusionCharts.HC.js, FusionCharts.HC.Charts.js,

jquery.min.js放入FusionCharts文件夹下,

4.在MyFirstChart创建Data.xml文件

内容:

<chart caption='Weekly Sales Summary'
   xAxisName='Week' yAxisName='Amount' numberPrefix='$'> 
    <set label='Week 1' value='14400' /> 
    <set label='Week 2' value='19600' /> 
    <set label='Week 3' value='24000' />
    <set label='Week 4' value='15700' /> 
</chart>

在MyFirstChart创建weekly-sales.html
内容
<html>
  <head>        
    <title>My First chart using FusionCharts XT</title>         
    <script type="text/javascript" src="FusionCharts/FusionCharts.js">
    </script>
  </head>   
  <body>     
    <div id="chartContainer">FusionCharts XT will load here!</div>          
    <script type="text/javascript"><!--         

      var myChart = new FusionCharts( "FusionCharts/Column3D.swf", 
      "myChartId", "400", "300", "0" );
      myChart.setXMLUrl("Data.xml");
      myChart.render("chartContainer");
      
    // -->     
    </script>      
  </body> 
</html>
打开weekly-sales.html便可看到
下面分析运行原理：
如果你想要使用fusionchars创建一个chart你需要
1.Chart SWF 文件 :使用Adobe Flash player来绘制报表,如例子中的FusionCharts/Column3D.swf(http://docs.fusioncharts.com/charts/contents/Introduction/ChartList.html:此链接能查看fusionchart中所有swf文件)
2.Chart data 数据：例子中Data.xml的的信息,fusionchart有2种格式的数据格式:
一种是xml格式(见:http://docs.fusioncharts.com/charts/contents/DataFormats/XML/Overview.html)
一种是Json格式(见:http://docs.fusioncharts.com/charts/contents/DataFormats/JSON/Overview.html)
3.JavaScript class 文件如上面的FusionCharts.js等等：这些文件主要是为了将swf生成的报表放入html中显示,如果你使用比如：ipad/iPhone等不支持Adobe Flash player的设备浏览fusionchart生成的报表这时主要就是这些js文件绘制chart
4.HTML 页面，也就是所要显示的页面


以上只是粗略的介绍详细的请看官网入门：http://docs.fusioncharts.com/charts/contents/FirstChart/FirstChart.html
如果生成chart过程中出现问题请看上面链接中的 Troubleshooting部分(里面对一般的错误信息都进行了分析)
对于initChart的分析,也就是以下的内容
<script type="text/javascript"><!--         

      var myChart = new FusionCharts( "FusionCharts/Column3D.swf", 
      "myChartId", "400", "300", "0" );
      myChart.setXMLUrl("Data.xml");
      myChart.render("chartContainer");
      
    // -->     
    </script> 
myChartId:所要生成的charts的id(页面中这个ID应该是唯一的);400和300是宽高;0这个属性已经弃用;chartContainer:是chart绘制在html页面中的DIV的ID
更详细的介绍请查看:http://docs.fusioncharts.com/charts/contents/JavaScript/API/Methods.html#chartparams

下面是fuisonchart工作原理图：
http://docs.fusioncharts.com/charts/contents/guide-for-web-developers/how-fusioncharts-works/HowFCWorks.html
通过对比 Data URL method 和Data String method 可知:
如果你像上面的例子一样使用静态的：data.xml作为数据源那么对于一些设备，它对本地的文件会有安全限制，所有访问不到xml文件
这时你应该是用Data String method：
 myChart.setXMLData("<chart><set label='Data1' value='1' /></chart>");来进行对数据源的设定
当然你可以查看下：FusionChartsSuiteXTEval\FusionCharts XT\Code\MyFirstChart文件夹中FormBased.html
附带截图

这个是从表格数据生成饼状图,