fusioncharts基础入门学习笔记
2019年12月15日
| 标签:
标题：fusioncharts基础入门学习笔记
——————————————————————————————————————————-
时间：2012/11/10 18:05:28
——————————————————————————————————————————-
内容：
因为个人爱好和一半工作 一半自我满足成就感的需要
现在需要制作一个在线的工具， 目前业务流程分3部分
使用php语言以及mysql作为工具
- 抓取指定网站页面，提取需要的信息进数据库
- 按照需求，赛选出需要的数据进行查询
- 讲查询结果输出到页面 以flash的方式展示
初步计划这3部分由3个人来完成 我负责后面的展示部分
查询相关文档得知需要用flash组件配合php来完成
再对比了若干个组件和 层层赛选 最后选择了fusioncharts，highcharts其实也可以但是不够炫 虽然定置功能还可以
那么就锁定了学习fusioncharts了完成我的目的 将数据以需要的形式展示
首先我找入门攻略 这里介绍FusionCharts Free中文开发指南，道长A写的 很浅显易懂 最重要的是有很多例子 花1个小时
0基础的就可以作出让人吃惊的东西了这里建议边看 边跟着做一遍 然后再精读一遍
我整理下我学到的知识
- 安装
-
- 首先我们使用免费版入门 这个工具有很多版本 但是免费版的网站资源最丰富 所以我们选择使用免费版的安装， 解压下面有几个文件夹
- JS 这个文件夹里面只有一个文件 用来在html或者php页面通过js来嵌入flash的 因为ie和火狐多flash的参数设置是不同的所以如果使用插入flash来做必须分别写flash的param和embed变量前者是ie的后者是火狐的 代码量大 可读性差
- Charts 这个文件夹里面就是已经制作好的flash壳子 里面有预定义好的flash图形模板 分2d和3d-名字中包含2d或者3d，还分单系列数据和多系列数据名字中以M打头的，还分是否是堆栈积累图名字有S的stack的意思 还有双y轴的 名字中有2个图形的英语这个文件以后用的最多 要熟悉他的名字 以后调用只用改变这个名字就可以有不同的 图形了
- Content 文件夹放html帮助文件夹的用的少 全英文 想睡觉的时候可以看看
- Code 文件夹是放案例的 不同的语言怎么调用flash 我是没看的 直接看中文介绍的例子更容易
- Gallery 文件夹是现成的例子了 他是包含了swf动画和xml的数据的
- 知道文件夹的用处后 就开始在服务器或者本地测试环境部署了 只用2个文件夹的数据 是需要上传的服务器的 一个就是js文件 一个就是charts目录下的所有动画 继续数据的xml的文件是后期自己生成的 建议服务器的根目录下创建一个js文件夹把这个fusioncharts里面的放进去，再创建一个swf的文件夹用来统一管理所有的动画模板
- 首先我们使用免费版入门 这个工具有很多版本 但是免费版的网站资源最丰富 所以我们选择使用免费版的安装， 解压下面有几个文件夹
- 使用
-
- 制作一个简单的例子来了解生成一个flash的过程 fusioncharts最好的优点是不需要掌握flash的编程只用了解你网页使用的编程语言就可以了使用fusioncharts只需要4个文件分别是js，用来控制嵌入 一个html用来创建一个页面 在这个页面上看到flash 然后就是flash的模板文件 这个也已经有了，所以我们真正要做的就是怎么去组织xml文件
-
- 现在fusioncharts的xml文件格式 首先明确一个概念，他是一个简单的数据库文件，包含元素和元素的属性和元素的类别，例如标准的xml文件是全部包含2大部分graphic 和set
-
- Graphic是root元素，在这个元素中可以对整个flash的全局变量进行设置，例如flash的大小 背景色，标题，x坐标名称y坐标名称图形是否阴影，是否显示每个图形的值
- Set元素是root元素的子集，他就是实际数据，他可以包括的数据有点击这个图形是否有超链接，图形的x和y坐标值以及颜色
- 了解了xml的具体变量是非常重要的，为后期动态调用图表，既根据输入的url参数（可以设置表单，手动输入需要的数值，然后转换为URL，然后将url通过php的get命令获取赋值给xml中的个个变量，例如先做一个数组 可以存放所有的flash路径，或者指定需要的数据范围及起点和长度，以及图表标题，以及通过预定义一个数组来存放不同的颜色）
- 前面说的是衍生的，先制作一个例子，直接复制制作好的xml文件的文本部分 然后保存为data.xml 其实xml就是一个文件文件 只不过用浏览器打开的时候会解析为一个结构式数据库展示 在创建一个html页面 复制代码 在代码中修改引用的flash和xml文件的路径 根据前面的建议 路径会不一样 ，然后打开这个html页面 就可以看到生成好的flash动画了
-
- 关于xml文件的引用 还可以源代码使用的是dataurl的方式既在源代码中使用文件路径的方式，其实也可以使用dataxml 把源代码通过文本的形式写入到当前页面，但是建议使用url 文件引用的形式，方便分析问题
- 关于flash文件的引用 也是2种方法一种是object 插入的方式 前面提前到因为ie和火狐的兼容文件所以会生成冗余代码 建议使用js的方式那么就需要包含前面提到的js文件了 然后xml文件引用的方法也会变了就是setdataurl和setdataxml 前面已经交代 使用url
- 总而言之 实际运用中是采用js插入flash然后使用setdataurl来引用一个xml的路径，最重要一点这个xml可以不是以xml后缀结尾的静态文本文件，而可以是一个可以通过url动态参数输入 生成xml的 php文件，即我用php的echo来模拟写一个xml文件，这里有陷阱就是注意xml文件不要包含看不见的符号 会显示不出来中文，同时可以通过循环来生成众多的set元素 调用数据来对每个元素指定颜色 set的数字值着可以是根据setdataurl中url中的参数来调用mysql出来
因为个人爱好和一半工作 一半自我满足成就感的需要
现在需要制作一个在线的工具， 目前业务流程分3部分
使用php语言以及mysql作为工具
- 抓取指定网站页面，提取需要的信息进数据库
- 按照需求，赛选出需要的数据进行查询
- 讲查询结果输出到页面 以flash的方式展示
初步计划这3部分由3个人来完成 我负责后面的展示部分
查询相关文档得知需要用flash组件配合php来完成
再对比了若干个组件和 层层赛选 最后选择了fusioncharts，highcharts其实也可以但是不够炫 虽然定置功能还可以
那么就锁定了学习fusioncharts了完成我的目的 将数据以需要的形式展示
首先我找入门攻略 这里介绍FusionCharts Free中文开发指南，道长A写的 很浅显易懂 最重要的是有很多例子 花1个小时
0基础的就可以作出让人吃惊的东西了这里建议边看 边跟着做一遍 然后再精读一遍
我整理下我学到的知识
- 安装
-
- 首先我们使用免费版入门 这个工具有很多版本 但是免费版的网站资源最丰富 所以我们选择使用免费版的安装， 解压下面有几个文件夹
- JS 这个文件夹里面只有一个文件 用来在html或者php页面通过js来嵌入flash的 因为ie和火狐多flash的参数设置是不同的所以如果使用插入flash来做必须分别写flash的param和embed变量前者是ie的后者是火狐的 代码量大 可读性差
- Charts 这个文件夹里面就是已经制作好的flash壳子 里面有预定义好的flash图形模板 分2d和3d-名字中包含2d或者3d，还分单系列数据和多系列数据名字中以M打头的，还分是否是堆栈积累图名字有S的stack的意思 还有双y轴的 名字中有2个图形的英语这个文件以后用的最多 要熟悉他的名字 以后调用只用改变这个名字就可以有不同的 图形了
- Content 文件夹放html帮助文件夹的用的少 全英文 想睡觉的时候可以看看
- Code 文件夹是放案例的 不同的语言怎么调用flash 我是没看的 直接看中文介绍的例子更容易
- Gallery 文件夹是现成的例子了 他是包含了swf动画和xml的数据的
- 知道文件夹的用处后 就开始在服务器或者本地测试环境部署了 只用2个文件夹的数据 是需要上传的服务器的 一个就是js文件 一个就是charts目录下的所有动画 继续数据的xml的文件是后期自己生成的 建议服务器的根目录下创建一个js文件夹把这个fusioncharts里面的放进去，再创建一个swf的文件夹用来统一管理所有的动画模板
- 首先我们使用免费版入门 这个工具有很多版本 但是免费版的网站资源最丰富 所以我们选择使用免费版的安装， 解压下面有几个文件夹
- 使用
-
- 制作一个简单的例子来了解生成一个flash的过程 fusioncharts最好的优点是不需要掌握flash的编程只用了解你网页使用的编程语言就可以了使用fusioncharts只需要4个文件分别是js，用来控制嵌入 一个html用来创建一个页面 在这个页面上看到flash 然后就是flash的模板文件 这个也已经有了，所以我们真正要做的就是怎么去组织xml文件
-
- 现在fusioncharts的xml文件格式 首先明确一个概念，他是一个简单的数据库文件，包含元素和元素的属性和元素的类别，例如标准的xml文件是全部包含2大部分graphic 和set
-
- Graphic是root元素，在这个元素中可以对整个flash的全局变量进行设置，例如flash的大小 背景色，标题，x坐标名称y坐标名称图形是否阴影，是否显示每个图形的值
- Set元素是root元素的子集，他就是实际数据，他可以包括的数据有点击这个图形是否有超链接，图形的x和y坐标值以及颜色
- 了解了xml的具体变量是非常重要的，为后期动态调用图表，既根据输入的url参数（可以设置表单，手动输入需要的数值，然后转换为URL，然后将url通过php的get命令获取赋值给xml中的个个变量，例如先做一个数组 可以存放所有的flash路径，或者指定需要的数据范围及起点和长度，以及图表标题，以及通过预定义一个数组来存放不同的颜色）
- 前面说的是衍生的，先制作一个例子，直接复制制作好的xml文件的文本部分 然后保存为data.xml 其实xml就是一个文件文件 只不过用浏览器打开的时候会解析为一个结构式数据库展示 在创建一个html页面 复制代码 在代码中修改引用的flash和xml文件的路径 根据前面的建议 路径会不一样 ，然后打开这个html页面 就可以看到生成好的flash动画了
-
- 关于xml文件的引用 还可以源代码使用的是dataurl的方式既在源代码中使用文件路径的方式，其实也可以使用dataxml 把源代码通过文本的形式写入到当前页面，但是建议使用url 文件引用的形式，方便分析问题
- 关于flash文件的引用 也是2种方法一种是object 插入的方式 前面提前到因为ie和火狐的兼容文件所以会生成冗余代码 建议使用js的方式那么就需要包含前面提到的js文件了 然后xml文件引用的方法也会变了就是setdataurl和setdataxml 前面已经交代 使用url
- 总而言之 实际运用中是采用js插入flash然后使用setdataurl来引用一个xml的路径，最重要一点这个xml可以不是以xml后缀结尾的静态文本文件，而可以是一个可以通过url动态参数输入 生成xml的 php文件，即我用php的echo来模拟写一个xml文件，这里有陷阱就是注意xml文件不要包含看不见的符号 会显示不出来中文，同时可以通过循环来生成众多的set元素 调用数据来对每个元素指定颜色 set的数字值着可以是根据setdataurl中url中的参数来调用mysql出来
发表评论
| Trackback
