fusionchart实时刷新数据总结
- 格式:docx
- 大小:434.47 KB
- 文档页数:7
fusioncharts总结FusionCharts学习总结一、简介FusionCharts 是InfoSoft Global 公司的一个产品,InfoSoft Global 公司是专业的Flash 图形方案提供商,他们还有几款其他的,基于Flash 技术的产品,都非常的漂亮。
FusionCharts Free 则是FusionCharts 提供的一个免费版本,虽然免费,功能依然强大,图形类型依然丰富。
FusionCharts free 是一个跨平台,跨浏览器的flash 图表组件解决方案,能够被, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单HTML 页面甚至PPT 调用。
FusionCharts free新版本中所做的改动:增加了使用jsp 和Ruby on Rails 来集成FusionCharts 的代码和文档。
FusionCharts DOM 更加容易地把图表加载到页面上。
修改了.Net 的使用代码和文档。
增加了新的PHP API ,并修复了一些BUG。
修改了FusionCharts.js ,以便可以支持双引号。
增加了在FusionCharts 使用UTF-8 编码的示例。
二、报表图形分类1. 3D/2D柱形图2. 曲线图3. 3D/2D饼形图和环形图4. 区域图5. 堆栈图6. 联合图7. 蜡烛图8. 漏斗图9. 甘特图三、报表图形对应的swf文件分类四、安装使用1. 在web项目目录下新建一个文件夹( 如FusionCharts),并把所有的SWF 文件都拷贝到这个文件夹里。
2. 在页面导入FusionCharts.js文件,如:<script type="text/javascript" src="FusionCharts.js"></script>3. js加载数据生成报表(有两种方法)方法一:xml文件引用法(1)定义一个固定格式的xml文件(以Data.xml为例)Date.xml的内容如下:(2) js加载方法,代码如下:方法二:字符串加载法(1)定义一个有固定格式的字符串,即可以将上述xml文件组合成字符串(2)js加载方法,代码如下:解析:操作步骤:<1>建立对象:用四个参数建立了一个FusionCharts对象,var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");第一个参数是SWF文件的地址。
数据透析表的数据源更新与动态刷新方法数据透析表是一种强大的工具,可以帮助我们将大量的数据可视化,并能从中提取有用的信息。
在使用数据透析表时,一个重要的任务是保持数据源的更新和动态刷新。
本文将介绍数据透析表的数据源更新方法和动态刷新方法。
首先,让我们先了解数据透析表的基本概念。
数据透析表是一种用于整理和分析数据的工具,通常以交叉表的形式呈现。
它允许我们以不同的维度和度量来分析数据,以便更好地理解数据之间的关联和趋势。
要保持数据透析表的准确性和实时性,我们需要定期更新数据源。
数据源可以是各种形式的数据,如Excel文档、数据库、API等。
根据数据源的不同,我们可以采取以下几种方法来更新数据。
首先是手动更新数据源。
这种方法需要我们手动打开数据源文件,将最新的数据复制粘贴到数据透析表中。
虽然这种方法比较简单,但对于大量和频繁更新的数据来说,效率很低。
其次是定期自动更新数据源。
我们可以使用一些自动化工具或脚本来定期从数据源中提取数据,并自动更新数据透析表。
这种方法可以节省时间和精力,并确保数据的及时更新。
可以根据具体需求,设定更新的时间间隔,如每天、每周或每月。
另外一种方法是使用外部插件或扩展程序来连接与数据源并实现自动刷新。
许多数据透析表工具提供了各种插件和扩展程序,可以直接连接到数据库或通过API实时获取数据。
通过配置插件的设置,我们可以定期或实时刷新数据,确保数据透析表的准确性。
除了数据源的更新,动态刷新也是数据透析表的一个重要特性。
动态刷新可以保持数据透析表中的数据实时更新,以便在分析和决策过程中获取最新的数据。
对于使用Excel创建的数据透析表,我们可以使用自动刷新功能来实现动态刷新。
在Excel中,我们可以设置一个自动刷新周期,让数据透析表在设定的时间间隔内自动更新。
这样,当数据源发生变化时,数据透析表会自动刷新,并显示最新的数据。
对于其他数据透析表工具,如Tableau和Power BI,它们通常具有内置的动态刷新功能。
数据透析表的数据透视图刷新与更新指南数据透析表是一种用于分析和汇总大量数据的工具,它可以帮助用户快速了解数据中的模式和关联性。
在使用数据透析表时,经常需要对数据透视图进行刷新和更新,以确保所展示的数据始终是最新的。
本文将为您介绍数据透析表的刷新和更新指南,以帮助您更好地使用该功能。
1. 数据透析表的刷新概述数据透析表的刷新是指更新数据透视图中的源数据,并将更新后的数据呈现在透视图中。
刷新数据透视图可以保持数据的准确性和实时性,保证您所看到的图表和统计数据都是最新的。
2. 手动刷新数据透视图数据透析表通常会自动刷新,但有时您可能需要手动刷新数据透视图。
要手动刷新数据透视图,您可以选择数据透析表中的任意单元格,然后点击右键,在弹出菜单中选择“刷新”选项。
此外,还可以使用快捷键“Ctrl + Alt + F5”来刷新数据透视图。
3. 自动刷新数据透视图为了保持数据透视图的实时性,您可以设置自动刷新功能。
要设置自动刷新,首先选择数据透析表中的任意单元格,然后点击“选项”选项卡。
在“数据”组中,找到“刷新数据”按钮,点击下拉菜单中的“刷新数据”选项。
接下来,选择您想要的自动刷新间隔(例如每隔几分钟或每隔几小时),然后点击“确定”按钮。
4. 更新数据透视图源数据有时,您可能需要更新数据透视图的源数据。
例如,您可能添加了新的数据行或列,或者已更改现有数据。
在这种情况下,您需要手动更新数据透视图。
要更新数据透视图源数据,首先更新原始数据源,然后右键单击透析表中的任意单元格,并选择“刷新”选项。
当您点击“刷新”选项时,数据透视图将会自动重新计算并显示更新后的数据。
5. 删除旧的数据透视图有时,在更新和刷新数据透视图后,不再需要旧的数据透视图。
为了保持工作区整洁,并避免与其他数据透视图混淆,您可以删除旧的数据透视图。
要删除数据透视图,首先选中所要删除的透视图,然后点击“选项”选项卡。
在“工作薄工具”组中,点击“删除”按钮,在下拉菜单中选择“删除数据透视表”。
一、FusionCharts构成的基本三要素:swf,data,承载图表的载体。
Swf:Charts文件夹下面的所有swf文件,需要什么样的图表样式,就加在与之相对应的swf文件。
Data:数据源。
数据可以是*.xml, *.json 文件,也可以是代码中xml或json格式的数据。
载体:页面中装载swf的空间组件。
Eg:div,span等等。
二、装载swf的注意事项1.装载swf的基本语法页面必须引用FusionCharts.js<script type="text/javascript"src="../ FusionCharts.js"></script><div id="chartdiv">FusionCharts will be loaded here!</div><script type="text/javascript">var chart = new FusionCharts("../FusionCharts/Column3D.swf", "chartid", "400", "300", "0", "1");chart.setDataURL("../FusionData/LinkjavascriptData.xml");chart.render("chartdiv");</script>Column3D.swf:所要展现的图表类型LinkjavascriptData.xml:图表引用的数据源FusionCharts(“swf”,”id”,”width”,”height”,”debugmodel”,”registerwithjs”):debugmodel 通常设置为0,registerwithjs通常设置为1.2.基本数据格式XML文件<chart>开头,以</chart>结束;或者以<graph>开头,以</graph>结束。
echarts刷新方法# ECharts图表的刷新方法详解ECharts是一款由百度开发的强大的数据可视化库,它支持多种图表类型并提供了丰富的交互功能。
在实际应用中,我们可能需要动态地更新图表的数据或配置,这时就需要用到ECharts的刷新方法。
本文将详细介绍如何使用ECharts进行图表的刷新。
## 1. 刷新图表的基本方法:setOption()### 方法定义:```javascriptechartsInstance.setOption(option, notMerge, lazyUpdate)```- `option`:新的图表配置项和数据。
当我们需要更新图表的数据或者修改图表的配置时,通过传入新的option对象来实现。
- `notMerge`(可选):布尔值,默认为false。
当设置为true时,新option 不会与旧option合并,而是直接替换旧option。
如果设为false,则新老option 会进行深度合并。
- `lazyUpdate`(可选):布尔值,默认为false。
当设置为true时,不立即渲染,只更新内部数据,适合大数据量下性能优化。
### 示例:```javascript// 假设已经获取了echarts实例var chart =echarts.getInstanceByDom(document.getElementById('main'));// 新的数据或配置var newOption = {series: [{data: [820, 932, 901, 934, 1290, 1330, 1320]}]};// 刷新图表数据chart.setOption(newOption);```## 2. 动态数据加载与刷新对于实时更新的数据,可以结合`setInterval`或`setTimeout`等定时器,定时调用`setOption`方法刷新数据。
数据透析表的数据更新与自动刷新方法数据透析表是一种有效管理和分析数据的工具,能够帮助我们提高数据处理的效率和准确性。
在使用数据透析表时,确保数据的准确性和及时更新是非常重要的。
本文将介绍数据透析表中数据更新和自动刷新的方法,以帮助读者更好地管理和利用数据透析表。
一、数据更新方法1. 手动更新:最简单的方法是手动更新数据透析表。
用户可以通过手动输入、复制粘贴或导入数据的方式将最新的数据添加到数据透析表中。
这个方法适用于数据量小且更新频率低的情况,但对于大量数据和频繁更新的情况可能不够高效。
2. 数据连接:数据透析表可以与外部数据源建立连接,实现自动更新数据。
用户可以选择与数据库、在线数据源或其他外部文件进行连接,并设置更新频率。
当外部数据有新的更新时,数据透析表会自动获取最新的数据,保持数据的一致性和准确性。
3. VBA宏:在数据透析表中,用户可以使用VBA (Visual Basic for Applications)宏编程语言来实现数据更新。
通过编写VBA宏,用户可以自定义更新逻辑和操作,实现数据的自动更新。
例如,可以编写VBA宏来从特定的文件夹中读取数据,并将数据更新到数据透析表中。
二、自动刷新方法1. 使用数据透析表自动刷新功能:大多数数据透析表软件都提供了自动刷新功能,用户可以在设置中设置刷新间隔,并启用自动刷新功能。
当数据透析表检测到有新数据时,它会自动刷新表格,将最新的数据显示出来。
这个功能对于需要及时了解数据更新的用户非常有用。
2. 使用VBA宏定时刷新:与数据更新类似,用户可以使用VBA宏来定时刷新数据透析表。
通过编写VBA宏,用户可以设置定时任务,使数据透析表在特定时间自动刷新。
这个方法可以用于那些需要按时刷新数据透析表的场景,例如每天、每周或每月定时刷新。
3. 使用外部工具:除了数据透析表软件本身提供的自动刷新功能,用户还可以借助外部工具来实现数据透析表的自动刷新。
通过使用计划任务(Windows)或Cron任务(Linux/Unix),用户可以设置定时任务来执行数据透析表的刷新操作。
FusionCharts参数的详细说明和功能特性功能特性animation 是否动画显示数据,默认为1(True)showNames是否显示横向坐标轴(x轴)标签名称rotateNames是否旋转显示标签,默认为0(False):横向显示showValues是否在图表显示对应的数据值,默认为1(True) yAxisMinValue指定纵轴(y轴)最小值,数字yAxisMaxValue指定纵轴(y轴)最小值,数字showLimits是否显示图表限值(y轴最大、最小值),默认为1(True)图表标题和轴名称caption 图表主标题subCaption图表副标题xAxisName横向坐标轴(x轴)名称yAxisName纵向坐标轴(y轴)名称图表和画布的样式bgColor图表背景色,6位16进制颜色值canvasBgColor画布背景色,6位16进制颜色值canvasBgAlpha画布透明度,[0-100]canvasBorderColor画布边框颜色,6位16进制颜色值canvasBorderThickness画布边框厚度,[0-100] shadowAlpha投影透明度,[0-100]showLegend是否显示系列名,默认为1(True)字体属性baseFont图表字体样式baseFontSize图表字体大小baseFontColor图表字体颜色,6位16进制颜色值outCnvBaseFont图表画布以外的字体样式outCnvBaseFontSize图表画布以外的字体大小outCnvBaseFontColor图表画布以外的字体颜色,6位16进制颜色值分区线和网格numDivLines画布内部水平分区线条数,数字divLineColor水平分区线颜色,6位16进制颜色值divLineThickness水平分区线厚度,[1-5]divLineAlpha水平分区线透明度,[0-100]showAlternateHGridColor是否在横向网格带交替的颜色,默认为0(False) alternateHGridColor横向网格带交替的颜色,6位16进制颜色值alternateHGridAlpha横向网格带的透明度,[0-100]showDivLinues是否显示Div行的值,默认??numVDivLines画布内部垂直分区线条数,数字vDivLineColor垂直分区线颜色,6位16进制颜色值vDivLineThickness垂直分区线厚度,[1-5]vDivLineAlpha垂直分区线透明度,[0-100]showAlternateVGridColor是否在纵向网格带交替的颜色,默认为0(False) alternateVGridColor纵向网格带交替的颜色,6位16进制颜色值alternateVGridAlpha纵向网格带的透明度,[0-100]数字格式numberPrefix增加数字前缀numberSuffix增加数字后缀% 为'%25'formatNumberScale是否格式化数字,默认为1(True),自动的给你的数字加上K(千)或M (百万);若取0,则不加K或MdecimalPrecision指定小数位的位数,[0-10] 例如:='0' 取整divLineDecimalPrecision指定水平分区线的值小数位的位数,[0-10] limitsDecimalPrecision指定y轴最大、最小值的小数位的位数,[0-10] formatNumber逗号来分隔数字(千位,百万位),默认为1(True);若取0,则不加分隔符decimalSeparator指定小数分隔符,默认为'.'thousandSeparator指定千分位分隔符,默认为','Tool-tip/Hover标题showhovercap是否显示悬停说明框,默认为1(True)hoverCapBgColor悬停说明框背景色,6位16进制颜色值hoverCapBorderColor悬停说明框边框颜色,6位16进制颜色值hoverCapSepChar指定悬停说明框内值与值之间分隔符,默认为','折线图的参数lineThickness折线的厚度anchorRadius折线节点半径,数字anchorBgAlpha折线节点透明度,[0-100]anchorBgColor折线节点填充颜色,6位16进制颜色值anchorBorderColor折线节点边框颜色,6位16进制颜色值Set标签使用的参数value 数据值color 颜色link 链接(本窗口打开[Url],新窗口打开[n-Url],调用JS函数[JavaScript:函数])name 横向坐标轴标签名称FusionCharts v3新增功能新的3.1版本:使得出口能力为PDF格式的图表和图片在客户端以及服务器端旋转文字并不需要任何更多的嵌入字体。
FusionCharts图表控件中文版使用手册附注fusionCharts详细属性一、构成fusionCharts的三要素: (3)swf、data.xml、承载图表的载体 (3)二、对于我们还未使用的功能: (3)图表转换成图片或者pdf导出、热点链接 (3)三、重点 (3)fusionCharts的基本知识部分: (4)一、SWF 动画文件 (4)二、XML数据文件 (4)三、HTML(当然也可以使用JSP)嵌入charts文件 (5)四、结合javascript 的应用: (5)五、热点链接:link=’ ’ (5)六、图表数据导出 (6)七、图表导出为pdf或者图片(JPEG和PNG)形式 (6)八、中文编码解决方法: (7)附注fusionCharts详细属性: (7)1、边框及整个背景的属性: (7)2、图表背景属性: (8)3、外部引入LOGO: (8)4、图表名称和轴属性: (9)5、data plot属性 (9)6、数据横纵轴属性 (9)7、图表上的数据显示 (10)8、图表调色板 (10)9、横轴坐标最大值、最小值属性 (10)10、图表内部的div线相关属性 (10)11、图表内部垂直div线的相关属性 (10)12、Zero plan相关属性 (11)13、Anchors相关属性(针对线图) (11)14、tool-tip 属性 (11)15、padding属性 (11)16、数据格式相关属性 (12)17、legend相关属性 (12)18、3D图表属性 (12)19、自定义菜单属性 (13)20、趋势线: (13)21、Styles属性:(eg)定义自定义效果属性,然后在一个对象上进行使用。
(13)按照编程xml构造结构分:(只列举出了几种主要属性,主要用于xmlBuiler).. 16一、构成fusionCharts的三要素:swf、data.xml、承载图表的载体1、Swf:按照你所设计的图表类型加载相应的.swf文件到你的工程即可(eg:若你想生成一张二维柱状图,那么在你的工程里就必须包含Column2D.swf文件)2、Data.xml:方法一:直接用data.jsp文件替代data.xml文件,写法格式同xml。
FusionCharts使用教程:使用JavaScript更新图表数据先创建一个简单的图表,然后改变它的数据(请参见下面的代码)。
图表最初据显示8月份的销售数据,当用户点击按钮时改为显示9月份的销售数据。
每个月都有单独的XML文件,代码如下: <html><head><title>Update Chart data</title><script type="text/javascript" src="../../FusionCharts/FusionCharts.js"></script></head><body><div id="chartContainer">FusionCharts will load here!</div><script type="text/javascript"><!--var myChart = new FusionCharts( "../../FusionCharts/Column3D.swf","myChartId", "400", "300", "0", "1" );myChart.setXMLUrl("AugustData.xml");myChart.render("chartContainer");function changeMonth(){var chartReference = FusionCharts("myChartId");chartReference.setXMLUrl("SeptemberData.xml");}// --></script><input type="button" onClick="changeMonth();" value="Change Month"></body></html>在上面的代码中,我们使用8月的数据创建了一个图表,数据存在于AugustData.xml文件中。
FusionChart参数大全(图文解释)说明:1、颜色值使用16进制表示,不需要#前缀,比如红色:FF00002、透明度,有效范围0~1003、下面的例图是用2D柱状图有需要的时候会引入其他类型的图。
4、布尔类型的值都用’1’和’0’表示。
5、图片导出功能/******若要将图表导出为图片或pdf,添加以下属性--start********************/graphConfig.setExportEnabled("1");graphConfig.setExportAtClient("1");graphConfig.setExportFormats("PNG");//PDF=导出为PDF|PNG=导出为PNG图片|JPG=导出JPG图片graphConfig.setExportDialogMessage();graphConfig.setExportHandler("fcExporter1");/******将图表导出为图片或pdf添加属性---end********************/页面需引入js (FusionChartsExportComponent.js)<script type="text/javascript">var myExportComponent = new FusionChartsExportObject("fcExporter1","/fusionCharts/swf/FCExporter.swf");ponentAttributes.width = '700';ponentAttributes.height = '60';//Background colorponentAttributes.bgColor = 'FFFFFF';//Border propertiesponentAttributes.borderThickness = '2';ponentAttributes.borderColor = '0372AB';//Font propertiesponentAttributes.fontFace = 'Arial';ponentAttributes.fontColor = '0372AB';ponentAttributes.fontSize = '12';//Message - caption of export componentponentAttributes.showMessage = '1';ponentAttributes.message = '先右击图表导出,再点击下边按钮进行保存.';//Button visual configurationponentAttributes.btnWidth = '200';ponentAttributes.btnHeight= '25';ponentAttributes.btnColor = 'E1f5ff';ponentAttributes.btnBorderColor = '0372AB'; //Button font propertiesponentAttributes.btnFontFace = 'Verdana'; ponentAttributes.btnFontColor = '0372AB'; ponentAttributes.btnFontSize = '15'; //Title of buttonponentAttributes.btnsavetitle = '保存图表';ponentAttributes.btndisabledtitle = '等待导出...'; myExportComponent.Render("fcexpDiv"); </script ><script type ="text/javascript">function exportChart(exportFormat){alert(monColumnChart.hasRendered()+"---"+myExportComponent.exportChart);if ( monColumnChart.hasRendered() ){document.getElementById( "linkToExportedFile" ).innerHTML = "Exporting...";monColumnChart.exportChart( { "exportFormat" : exportFormat } ); }else {document.getElementById( "linkToExportedFile" ).innerHTML = "Please wait till the chart completes rendering..." ; } }function FC_Exported(){// alert("导出成功!"); } </script >1、背景(Background )bgColor="FF0000" bgColor="00FF00" bgColor="FF0000,00FF00"相关属性参数:1):bgColor 设置背景颜色。
Fusionchart实时刷新方法(已在JSP中尝试成功的)
第一种:采用ajax刷新
JSP页面程序截图:
引用fusionchart的地方:
设置定时每个1秒引用依次ajax
Anglar6中设置图标样式:
Action中采用随机数来实现测试数据:
效果如下图:
优点:设置图标样式的地方(即Angular6)设置好样式后,每次只需传返回的数据,需按照官方文档写的格式,格式在如下图位置可以找到。
缺点:初始化图像时,读取Angular6 中的样式,一般没有初始化的数据,将导致刚打开页面时没有数据显示(如果设置每一秒一刷新,也就无所谓了)
第二种:采用js脚本刷新整个swf来刷新图像
一个鸡肋的方法:如果页面只有一个图像时等同于在jsp页面属性中添加
<meta http-equiv="refresh" content="60">
页面:
JS:
相当于每隔一段时间让图像重新载入一次(后台数据产生省略不写)
效果:
每隔十秒会出现一次重载swf的图像
优点:思路和方法都是最简单的
缺点:每次都与数据库重新交互一次,且每次出现一个重载wsf的图像
第三种:推荐的方法(但只适用于具有实时属性的图像FusionWidgets XT)
Jsp页面:
无需任何js之类的东西:
后台数据生成部分截图:红线标注的地方是生成实时图像的重点
上图红线对象的action所对应的service的图像返回数据生成部分截图按第一种方法中优点的截图地方可以查到具体的数据格式如何写:
效果每隔一分钟会向前移动一格:
优点:刚开始就可以产生一段时间内的图像,等设定时间到后会在时间轴最后追加新的数据
第四种:类似第一种方式的改进(但只适用于具有实时属性的图像FusionWidgets XT)Jsp页面:
对应读取图像样式的xml文件(红线为重点:)
数据生成后台(即红线的action所对应service层的方法)部分截图:
效果:
起始图:
运行中:
总结:关于更多的方法和属性可以参考如下图所示的官方说明文档
第五种:让Fusionchart XT版本刷新如Fusionchart Widgets版(不科学的方法,强烈不推荐使用)
一次刷新20个柱子,使用fusionchart Widget 版,达到效果如Fusionchart XT版不刷新swf 刷新data
Jsp页面:
后台action对应的service层
20跟柱子都附上初始值
关键部分:红线部分必须添加,初始为每个柱子都附上初始颜色(否则一个category会默认成一个颜色),属性的numDisplaySets设置为20个
红线部分的action对应的service 的feedData部分
同样先附上20个初始值
对应的formate data 部分(注意颜色的赋值对应初始的赋值的颜色)
效果图
刷新过程不刷新swf只会有数据的起伏变幻。