RealTimeLine学习笔记

13年前

1.什么是FusionCharts-RealTimeLine？

RealTimeLine顾名思义，就是实时的数据视图,是FusionWidgets的一个插件：

 

实时数据图：

样式一：

RealTimeLine学习笔记

样式二：

RealTimeLine学习笔记

样式三：

RealTimeLine学习笔记

2.如何获取FusionWidgets？

获取FusionWidgets可以在FusionCharts官方下载FusionWidgetsV3版本：http://www.fusioncharts.com/Downloads/Evals/FusionWidgets_Trial.zip

 

3.如何使用FusionCharts？

以下是FusionCharts 文件包的目录和文件：

 RealTimeLine学习笔记

我们用到的就只有两个文件夹：

Charts 图表要使用到的FLASH文件

JSClass 图表的JS主函数

一般情况下我们把这两个文件夹复制到我们工程目录下即可。另外Gallery里面提供了部分例子，但Real-time / Data-streaming / Self-updating charts 这些并未提供，要熟悉相关写法可参照官网的演示案例，查看其真实写法：http://www.fusioncharts.com/widgets/gallery.asp#realtime1。

 

现在我们以第一个样式为例子：

 

XML代码：

<chart bgColor='000000' bgAlpha='100' canvasBorderThickness='2' canvasBorderColor='008040' canvasBgColor='000000' yAxisMaxValue='100'  decimals='0' numdivlines='16' numVDivLines='16' numDisplaySets='16' divLineColor='008040' vDivLineColor='008040' divLineAlpha='100' chartLeftMargin='10' baseFontColor='00dd00' showRealTimeValue='0' dataStreamURL='Data/RealTimeLine_Stream.html' refreshInterval='0.02' numberSuffix='%' labelDisplay='rotate' slantLabels='0' toolTipBgColor='000000' toolTipBorderColor='008040' baseFontSize='11' showAlternateHGridColor='0' legendBgColor='000000' legendBorderColor='008040' legendPadding='35' showLabels='1' >

 

<categories>

<category label='开始'/>

</categories>

 

<dataset color='00dd00' seriesName='统计一' showValues='0' alpha='80' anchorAlpha='0' lineThickness='3'>

<set value='0' />

</dataset>

 

<datset color='ff5904' seriesName='统计二' showValues='80' alpha='160' anchorAlpha='1' lineThickness='3'>

<set value='0' />

</dataset>

 

<dataset color='ffffff' seriesName='统计三' showValues='80' alpha='160' anchorAlpha='2' lineThickness='3'>

<set value='0' />

</dataset>

 

<dataset color='0000ff' seriesName='统计四' showValues='80' alpha='160' anchorAlpha='3' lineThickness='3'>

<set value='0' />

</dataset>

 

</chart>

 

 

部分属性介绍：

1.最为重要是dataStreamURL这个属性，这个属性可以为动态的页面，返回的必须为简单的字符串，格式：&label=12:00:20&value=48|75|85|72|

这个属性是非常重要的，如果书写不正确将导致视图无数据显示。

下面是一些值得注意的地方:

 

a.dataStreamURL='Data/RealTimeLine_Stream.html' 路径要注意，如果是相对路径必须以调用当前XML的页面为参照。

b.Data/RealTimeLine_Stream.html必须确保返回的正确的数据。为了测试这一点，只需打开浏览器并运行此网页。它应该返回文本格式的数据。

c.Data/RealTimeLine_Stream.html的动态网页必须返回文本格式数据，并且不能包含任何HTML元素。

 

2. refreshInterval为刷新数据的时间，确保填写正确，否则数据无法显示。经测试可以填写大于零整数和小数。

 

HTML代码：

 

 

<!-- 导入FusionCharts主函数 -->

<script src="JSClass/FusionCharts.js"></script>

 

<!-- 显示饼图的控件DIV -->

<div id="chartdiv" align="center"> 视图将显示在这里 </div>

 

<!-- 实例化图表的函数 -->

    <script type="text/javascript">

        var myChart = new FusionCharts("Charts/RealTimeLine.swf", "myChartId", "600", "350", "0", "0");

        myChart.setDataURL("Data/RealTimeLine.xml");

          myChart.render("chartdiv");

    </script>

 

 

代码解释：

看到这里，你是不是觉得跟之前的饼图差不多？没错，简直是一模一样

var myChart = new FusionCharts("Charts/RealTimeLine.swf", "myChartId", "600", "350", "0", "0");

创建一个图表对象，Charts/RealTimeLine.swf为对应的swf文件。"ChartId"为放置图表的控件"500", "300", "0", "0" 这段为图表的宽高，边距。

myChart.setDataURL("Data/RealTimeLine.xml");设置XML数据源的路径。

myChart.render("chartdiv");设置图表要显示到的页面控件。

 

 

为了方便测试，我们可以创建一个静态的HTML页面作为数据流，页面位置：Data/ RealTimeLine_Stream.html

 HTML代码（HTML页面不可以放任何HTML元素，否则数据无法显示）：

&label=12:00:20&value=48|75|85|72|


至此一个简单的DEMO已经出来的，效果如下。

RealTimeLine学习笔记

 

总结：FusionCharts提供的各项表格视图都比较简单，大致分为两步：

1.根据已编译的SWF文件创建视图，设置数据源的路径及要显示到的控件。

2.设置XML格式的数据源。

如果设置没问题的话，数据就能显示出来，而且显示方式十分丰富。程序员不需要考虑效果是如果实现的（编译好的SWF文件已经设定好），只需正确实例化对象，引入数据即可。这大大地减少了程序员的工作量。是不一款不错的图形工具。

更多详细熟悉及效果待下一步研究。