fusioncharts基础入门学习笔记

2019年12月15日 | 标签:

标题:fusioncharts基础入门学习笔记

——————————————————————————————————————————-

时间:2012/11/10 18:05:28

——————————————————————————————————————————-

内容:

 

因为个人爱好和一半工作 一半自我满足成就感的需要

现在需要制作一个在线的工具, 目前业务流程分3部分

使用php语言以及mysql作为工具

  1. 抓取指定网站页面,提取需要的信息进数据库
  2. 按照需求,赛选出需要的数据进行查询
  3. 讲查询结果输出到页面 以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作为工具

  1. 抓取指定网站页面,提取需要的信息进数据库
  2. 按照需求,赛选出需要的数据进行查询
  3. 讲查询结果输出到页面 以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出来

         

 

目前还没有任何评论.