- 浏览: 35626 次
- 性别:
- 来自: 济南
最新评论
-
zhouxueliang:
可以定义到xml文件中,通过访问xml文件的方式实现。也可以定 ...
FusionCharts背景 -
jeffrey9061:
想问一下,是在xml里面写这些语句,还是在展示页写呢、
FusionCharts背景 -
shanwei0409:
你好,如何在页面内动态的加载多个chart
一个页面多个chart
在这里,我们将共同创建第一个图表。对于一个良好的开端,我们将创建一个简单的三维柱形图直观地描绘每月销售摘要。
这个例子使用简单的HTML嵌入方法,它不是嵌入FusionCharts的推荐的方法 - 在这里,我们如此操作是为了便于理解它。我们建议使用FusionCharts的JavaScript类嵌入所有的图表,因为这能解决跨浏览器的处理很多问题。
要使用FusionCharts创建人和图表,你都需要做三件事情
你要创建SWF文件中的图表。我们要创建一个三维柱形图,它的SWF文件是Column3D.swf命名。所有的SWF文件图表在 下载包 > Charts 文件夹中.
XML 数据文件. FusionCharts的只接受在预先定义的XML格式的数据。所以,你需要你的数据转换为XML格式 - 无论是使用服务器端脚本语言或手动。.
HTML 包装文件. 这个HTML文件将包含代码嵌入图表。
在我们得到上述项目前让我们先创建一个新的文件夹,将作为我们对我们的检查和研究。在你的计算机上创建一个新文件夹名为C\FusionCharts。我们将保持这个文件夹内所有的例子.
在文档中讨论的所有例子都在下载包中的Code 文件夹中.
设置图表的SWF
现在,为了建立图表,我们需要复制该文件夹内的SWF文件。在此之前,另一个文件夹FusionCharts的创建在c:\FusionCharts的,因此,新的文件夹看起来像C:\FusionCharts的\FusionCharts的。此文件夹将是我们所有的SWF文件图表容器。
复制所有的图表SWF文件(从下载包> Charts文件夹)到新创建的文件夹 (c:\FusionCharts\FusionCharts\).
作为该文件夹的图表核心位置。我们所有的例子将使用这一个文件夹中包含的图表。
当你在你的网站上使用FusionCharts的时候,在一个文件夹名为FusionCharts的根级别文件夹下存放所有的SWF文件是个明智之举.这可以确保您不会使用同一图表SWF的多个副本。因此更新图表变得很容易,你只需要在一个地方复制粘贴新的图表。
现在的SWF文件被设置了,我们继续前进,看看如何创建我们的图表的XML数据.
创建XML数据文档
在我们建立的图表之前我们首先需要这些图表的数据。由于我们正在汇总每年的月度销售,我们的数据以表格形式将看起来象下面这样的东西。下面给出用三维柱形图表示的每月数据
月
净收入
January
$17400
February
$19800
March
$21800
April
$23800
May
$29600
June
$27600
July
$31800
August
$39700
September
$37800
October
$21900
November
$32900
December
$39800
现在,正如刚才所说,FusionCharts需要预先定义的XML格式的数据。除了从XML它不能读取任何其他的格式(包括Excel,CSV或其他文本数据格式)。因此,我们需要把这些数据转换成XML
您可以使用可视化的XML生成工具转换成XML此表格数据。参见“对一般用户指南”一节说明。
转换后的XML数据如下:
<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
<set label='January' value='17400' />
<set label='February' value='19800' />
<set label='March' value='21800' />
<set label='April' value='23800' />
<set label='May' value='29600' />
<set label='June' value='27600' />
<set label='July' value='31800' />
<set label='August' value='39700' />
<set label='September' value='37800' />
<set label='October' value='21900' />
<set label='November' value='32900' />
<set label='December' value='39800' />
</chart>
在文本编辑器(如记事本)中编辑上述代码并把它保存在Data.xml,位置在 c:\FusionCharts\MyFirstChart 文件夹.
是的 - 不用担心你刚才写什么意大利面条的东西 - 我们将很快覆盖他们。基本上,我们上述所做的可以列出以下几点::
我们已经创建了根<chart>元素的几个属性,来定义标题,坐标轴的名称和号码前缀字符,以包括一切.
对于每一个数据行,我们创建了一个 <set>标签元素. label元素表示我们要绘制的的月度名称和值.
正如一项措施,以检查是否该XML文档是有效的结构,在浏览器中打开该文件。您应该能够看到一个格式化的XML数据文档的方式,没有任何错误。.
为图表创建HTML容器
每个图表需要在一个HTML文件中嵌入才能查看,因此,为了显示图表,我们也要为它创建一个HTML容器。打开你的文本编辑器敲下如下代码:
<html>
<head>
<title>My First FusionCharts</title>
</head>
<body bgcolor="#ffffff">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="900" height="300" id="Column3D" >
<param name="movie" value="../FusionCharts/Column3D.swf" />
<param name="FlashVars" value="&dataURL=Data.xml&chartWidth=900&chartHeight=300">
<param name="quality" value="high" />
<embed src="../FusionCharts/Column3D.swf" flashVars="&dataURL=Data.xml&chartWidth=900&chartHeight=300" quality="high" width="900" height="300" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
在MyFirstChart 文件夹下,保存文件为 Chart.html .
上面的代码是实际代码,您需要在您的页面上嵌入一个FusionCharts的图表.
在上述代码中,我们进行了:
使用 <OBJECT> 和 <EMBED> 标记在HTML页面中嵌入3D柱状图(Column3D.swf).
使用 &dataUrl=Data.xml 在 FlashVars 参数来显示图表的数据源 – Data.xml . 这种显示数据的方法称为提供数据的dataURL 方法.
图表高度900宽度300,这在FlashVars中用chartWidth和chartHeight变量。
要在浏览器中正确显示Flash影片,网页应包含特定的标记,指定Flash电影文件被打开并播放。有两个标签是实现此目的的:<OBJECT>和<embed>标签
这两个标签必须不同的互联网浏览器正确显示Flash影片.<OBJECT>标记是使用在微软Windows的Internet Explorer中。<embed>标记是使用在Microsoft Windows或Mac操作系统的Netscape Navigator中。这两个关键字的每个行为使用同样的方式,只使用一个标记可能会导致不兼容的浏览器问题。为了确保大多数浏览器正常显示您的Flash电影,你必须把<embed>标记和<OBJECT>标记内嵌套如示例所示。启用ActiveX的浏览器将忽略<OBJECT>标记内的<embed>标记。老的微软浏览器和Netscape不在承认<OBJECT>标记,并只使用<embed>标签加载Macromedia Flash播放器
现在是时候展示你为第一个图表所作的努力了。在你的首选浏览器中打开chart.html。您现在应该看到一个像这个图表(以下图片已被调整大小 - 实际的图表将更大,更清晰):
我们只是证明了它是多么容易创建图表FusionCharts的。下一步,我们将告诉你如何能够非常容易地把此图表转换此成一个饼图
在这个例子中,FusionCharts为您的数据自动选择默认调色板。要在图表上的自定义颜色配置,你可选择预先定义的调色板,或指定全局调色板的颜色,或单独为每列指定为一个16进制颜色如 <set label='January' value='232323' color='FF0000' />
疑难解答
如果由于某种原因,你没有看到类似的上面图表显示,通过运行以下检查:
如果在你的浏览器中看到无尽的加载进度或者如有你右击菜单(图表的任何地方右击)显示“影片未加载”,检查如下:
是否你的图表SWF文件粘贴在FusionCharts的文件夹中
是否在你的 Chart.html 文件中提供了SWF路径属性?
是否在浏览器上安装Adobe Flash Player 8(或以上)插件?
是否确保你的浏览器支持ActiveX控件,正常情况下,所有的浏览器都支持Flash的。
如果显示“Error in Loading Data”信息,请检查以下内容
是否Data.xml文件和Chart.html在同一文件夹内?
是否Data.xml名称为Data.xml而不是Data.xml.txt,很多基本的文本编辑器都追加.txt后缀的?
如果显示"Invalid XML Data"信息,这意味着XML数据文件格式不正确的。检查一遍像常见的错误:
标签的差异. <chart> 应该以</chart>结束而不是 </Chart>或者 </CHART>
缺少开/关属性引号如, <chart caption=Monthly Sales' 应当为<chart caption='Monthly Sales'
缺少任何元素的结束标记.
检查您的最终XML是好的,在浏览器中打开它,你会看到错误.
这个例子使用简单的HTML嵌入方法,它不是嵌入FusionCharts的推荐的方法 - 在这里,我们如此操作是为了便于理解它。我们建议使用FusionCharts的JavaScript类嵌入所有的图表,因为这能解决跨浏览器的处理很多问题。
要使用FusionCharts创建人和图表,你都需要做三件事情
你要创建SWF文件中的图表。我们要创建一个三维柱形图,它的SWF文件是Column3D.swf命名。所有的SWF文件图表在 下载包 > Charts 文件夹中.
XML 数据文件. FusionCharts的只接受在预先定义的XML格式的数据。所以,你需要你的数据转换为XML格式 - 无论是使用服务器端脚本语言或手动。.
HTML 包装文件. 这个HTML文件将包含代码嵌入图表。
在我们得到上述项目前让我们先创建一个新的文件夹,将作为我们对我们的检查和研究。在你的计算机上创建一个新文件夹名为C\FusionCharts。我们将保持这个文件夹内所有的例子.
在文档中讨论的所有例子都在下载包中的Code 文件夹中.
设置图表的SWF
现在,为了建立图表,我们需要复制该文件夹内的SWF文件。在此之前,另一个文件夹FusionCharts的创建在c:\FusionCharts的,因此,新的文件夹看起来像C:\FusionCharts的\FusionCharts的。此文件夹将是我们所有的SWF文件图表容器。
复制所有的图表SWF文件(从下载包> Charts文件夹)到新创建的文件夹 (c:\FusionCharts\FusionCharts\).
作为该文件夹的图表核心位置。我们所有的例子将使用这一个文件夹中包含的图表。
当你在你的网站上使用FusionCharts的时候,在一个文件夹名为FusionCharts的根级别文件夹下存放所有的SWF文件是个明智之举.这可以确保您不会使用同一图表SWF的多个副本。因此更新图表变得很容易,你只需要在一个地方复制粘贴新的图表。
现在的SWF文件被设置了,我们继续前进,看看如何创建我们的图表的XML数据.
创建XML数据文档
在我们建立的图表之前我们首先需要这些图表的数据。由于我们正在汇总每年的月度销售,我们的数据以表格形式将看起来象下面这样的东西。下面给出用三维柱形图表示的每月数据
月
净收入
January
$17400
February
$19800
March
$21800
April
$23800
May
$29600
June
$27600
July
$31800
August
$39700
September
$37800
October
$21900
November
$32900
December
$39800
现在,正如刚才所说,FusionCharts需要预先定义的XML格式的数据。除了从XML它不能读取任何其他的格式(包括Excel,CSV或其他文本数据格式)。因此,我们需要把这些数据转换成XML
您可以使用可视化的XML生成工具转换成XML此表格数据。参见“对一般用户指南”一节说明。
转换后的XML数据如下:
<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
<set label='January' value='17400' />
<set label='February' value='19800' />
<set label='March' value='21800' />
<set label='April' value='23800' />
<set label='May' value='29600' />
<set label='June' value='27600' />
<set label='July' value='31800' />
<set label='August' value='39700' />
<set label='September' value='37800' />
<set label='October' value='21900' />
<set label='November' value='32900' />
<set label='December' value='39800' />
</chart>
在文本编辑器(如记事本)中编辑上述代码并把它保存在Data.xml,位置在 c:\FusionCharts\MyFirstChart 文件夹.
是的 - 不用担心你刚才写什么意大利面条的东西 - 我们将很快覆盖他们。基本上,我们上述所做的可以列出以下几点::
我们已经创建了根<chart>元素的几个属性,来定义标题,坐标轴的名称和号码前缀字符,以包括一切.
对于每一个数据行,我们创建了一个 <set>标签元素. label元素表示我们要绘制的的月度名称和值.
正如一项措施,以检查是否该XML文档是有效的结构,在浏览器中打开该文件。您应该能够看到一个格式化的XML数据文档的方式,没有任何错误。.
为图表创建HTML容器
每个图表需要在一个HTML文件中嵌入才能查看,因此,为了显示图表,我们也要为它创建一个HTML容器。打开你的文本编辑器敲下如下代码:
<html>
<head>
<title>My First FusionCharts</title>
</head>
<body bgcolor="#ffffff">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="900" height="300" id="Column3D" >
<param name="movie" value="../FusionCharts/Column3D.swf" />
<param name="FlashVars" value="&dataURL=Data.xml&chartWidth=900&chartHeight=300">
<param name="quality" value="high" />
<embed src="../FusionCharts/Column3D.swf" flashVars="&dataURL=Data.xml&chartWidth=900&chartHeight=300" quality="high" width="900" height="300" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
在MyFirstChart 文件夹下,保存文件为 Chart.html .
上面的代码是实际代码,您需要在您的页面上嵌入一个FusionCharts的图表.
在上述代码中,我们进行了:
使用 <OBJECT> 和 <EMBED> 标记在HTML页面中嵌入3D柱状图(Column3D.swf).
使用 &dataUrl=Data.xml 在 FlashVars 参数来显示图表的数据源 – Data.xml . 这种显示数据的方法称为提供数据的dataURL 方法.
图表高度900宽度300,这在FlashVars中用chartWidth和chartHeight变量。
要在浏览器中正确显示Flash影片,网页应包含特定的标记,指定Flash电影文件被打开并播放。有两个标签是实现此目的的:<OBJECT>和<embed>标签
这两个标签必须不同的互联网浏览器正确显示Flash影片.<OBJECT>标记是使用在微软Windows的Internet Explorer中。<embed>标记是使用在Microsoft Windows或Mac操作系统的Netscape Navigator中。这两个关键字的每个行为使用同样的方式,只使用一个标记可能会导致不兼容的浏览器问题。为了确保大多数浏览器正常显示您的Flash电影,你必须把<embed>标记和<OBJECT>标记内嵌套如示例所示。启用ActiveX的浏览器将忽略<OBJECT>标记内的<embed>标记。老的微软浏览器和Netscape不在承认<OBJECT>标记,并只使用<embed>标签加载Macromedia Flash播放器
现在是时候展示你为第一个图表所作的努力了。在你的首选浏览器中打开chart.html。您现在应该看到一个像这个图表(以下图片已被调整大小 - 实际的图表将更大,更清晰):
我们只是证明了它是多么容易创建图表FusionCharts的。下一步,我们将告诉你如何能够非常容易地把此图表转换此成一个饼图
在这个例子中,FusionCharts为您的数据自动选择默认调色板。要在图表上的自定义颜色配置,你可选择预先定义的调色板,或指定全局调色板的颜色,或单独为每列指定为一个16进制颜色如 <set label='January' value='232323' color='FF0000' />
疑难解答
如果由于某种原因,你没有看到类似的上面图表显示,通过运行以下检查:
如果在你的浏览器中看到无尽的加载进度或者如有你右击菜单(图表的任何地方右击)显示“影片未加载”,检查如下:
是否你的图表SWF文件粘贴在FusionCharts的文件夹中
是否在你的 Chart.html 文件中提供了SWF路径属性?
是否在浏览器上安装Adobe Flash Player 8(或以上)插件?
是否确保你的浏览器支持ActiveX控件,正常情况下,所有的浏览器都支持Flash的。
如果显示“Error in Loading Data”信息,请检查以下内容
是否Data.xml文件和Chart.html在同一文件夹内?
是否Data.xml名称为Data.xml而不是Data.xml.txt,很多基本的文本编辑器都追加.txt后缀的?
如果显示"Invalid XML Data"信息,这意味着XML数据文件格式不正确的。检查一遍像常见的错误:
标签的差异. <chart> 应该以</chart>结束而不是 </Chart>或者 </CHART>
缺少开/关属性引号如, <chart caption=Monthly Sales' 应当为<chart caption='Monthly Sales'
缺少任何元素的结束标记.
检查您的最终XML是好的,在浏览器中打开它,你会看到错误.
发表评论
-
FusionChart API 属性翻译
2011-03-11 10:42 2710Chart 对象 Object Name Descriptio ... -
FusionCharts部分详细参数
2011-03-03 22:05 2565从本节起,我们详细介绍每种图表的详细参数和使用方法,我们从2D ... -
FusionCharts背景
2011-03-03 22:03 1895在后面的几节中,我将会采用实例的方法,以一个一个的小问题为主线 ... -
动画效果
2011-03-03 15:22 864我们还是使用前面例子的代码 代码 1 <chart ... -
模糊样式类型
2011-03-03 15:21 828模糊样式类型 是最简单的样式类型,可以帮助你对任何图表对象实现 ... -
斜面样式类型
2011-03-03 15:20 857如果你想为图表的任何 ... -
发光样式类型属性
2011-03-03 15:19 905The 发光样式类型 让你对任何图表对象应用发光的轮廓。它具有 ... -
发光样式类型
2011-03-03 15:19 700发光样式类型 The 发光样式类型 让你对任何图表对象应用 ... -
FusionChart动画样式类型
2011-03-03 15:17 1418FusionCharts做得最好的事情之一就是图表动画序列,这 ... -
FusionCharts样式
2011-03-03 15:17 1551正如你已经知道,使用字体样式类型,您可以控制所有图表上的文本的 ... -
FusionChart新特性
2011-03-03 15:15 1524FusionCharts v3 比以前的版本拥有大量的新的 功 ... -
透明chart
2011-03-03 15:12 1154上面的例子我们已经可 ... -
setDataXMl
2011-03-03 15:10 1042在前面的例子中,我们使用了dataURL方法提供数据给Fusi ... -
一个页面多个chart
2011-03-03 15:08 1407FusionCharts可以在一个页 ... -
转换成饼图
2011-03-03 15:08 972在上一个例子(我的第一个图表), 我们创造了一个柱形图来摘要显 ... -
FusionCharts嵌入页面的两种方式
2011-03-03 15:03 1199一:直接的HTML代码(如下所示)来嵌入图表: <htm ...
相关推荐
'subCaption': '2022年第一季度', 'xAxisName': 'Week', 'yAxisName': '销售额', 'numberPrefix': '$' }, 'data': [ { 'label': 'Week 1', 'value': '12400' }, { 'label': 'Week 2', 'value': '13400' }, ...
2. **创建第一个图表**:从基础开始,学习如何生成一个简单的图表,包括定义图表类型、设置数据源和基本属性。 3. **自定义图表**:掌握如何调整图表的颜色、样式、标签等,以满足个性化需求。 4. **交互与事件处理*...
4. **使用手册**: FusionCharts的使用手册提供了一个全面的指南,从安装到创建第一个图表,再到高级功能的使用,一步步引导用户。它包含了实例代码、常见问题解答和最佳实践,帮助开发者快速上手。 5. **...
通常,使用FusionCharts的第一步是引入其JavaScript和SWF文件,例如这里的"Column3D.swf",这可能是用于展示3D柱状图的特定组件。接下来,我们需要创建XML数据源,该数据源将包含图表的各种属性(如标题、轴标签、...
**创建第一个图表**: 创建FusionCharts图表分为几个步骤: 1. 复制SWF文件到指定的Charts文件夹。 2. 创建XML数据文件,其中包含图表所需的数据,可以是直接的XML数据,也可以从数据库动态生成。 3. 创建HTML包装...
第三个尝试是利用Office自身的图表功能,遗憾的是,HWPF库不包含此功能,只有HSSF库(处理Excel)支持创建图表。这导致我们无法直接在Word中生成与FusionCharts风格一致的图表。 最后,开发者选择了使用JFreeChart...
1.FusionChart的简单使用,使用它可以显示丰富的柱状图和曲线图,而且完全免费。 2.此为MyEclipse工程,直接导入即可,调试时使用的是Tomcat 6.0。 3.可以自己再扩展,参考文档为:...4.第一次上传资源- -!希望喜欢!
FusionCharts是一款强大的图表库,它提供了多种图表类型,适用于Web应用程序,尤其是那些需要数据可视化功能的应用。Flex是Adobe开发的基于ActionScript的开源框架,用于构建富互联网应用(RIA)。当用户使用...
在Java环境中,"fusionchart for java"提供了一个方便的API,使得开发者可以利用Java语言生成动态、交互式的图表。这个库支持多种图表类型,包括线图、柱状图、饼图、散点图以及更复杂的图表,如仪表盘和甘特图等,...
3. **创建第一个图表** - 配置HTML:在HTML文件中预留图表容器,并引入FusionCharts JavaScript库。 - 初始化图表:使用JavaScript代码创建图表对象,设置图表类型、宽度、高度及数据源。 4. **数据格式与绑定** ...
在数据库中创建一个名为`FUSIONCHART_IMAGE_TEMP`的表,包含`ID`, `FILE_NAME`, 和`IMAGE`三个字段,其中`IMAGE`字段为BLOB类型,用于存储图片数据。 #### 三、总结 通过上述配置步骤,开发人员能够在FusionCharts...
GitHub分析仪 ... 我在这个项目中使用了React和React Hook。 该项目是的实践。 查看最终结果(您可能应该使用VPN)。 Gihthub API 我使用来获取数据。...对于未经身份验证的请求,速率...第一React图 图表清单 主题 验
纳税服务系统是我第一个做得比较大的项目(不同于javaWeb小项目),该项目系统来源于传智Java32期,十天的视频课程(想要视频的同学关注我的公众号就可以直接获取了) 我跟着练习一步一步完成需求,才发觉原来Java是这样...