|
|
|
In both our previous examples, we had used
direct HTML code (shown below) to embed a chart:
|
<html>
...
<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">
<param
name="quality" value="high" />
<embed
src="../FusionCharts/Column3D.swf" flashVars="&dataURL=Data.xml"
quality="high" width="900" height="300" name="Column3D"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"
/>
</object>
...
</html> |
|
As you can see above, we've used the <OBJECT>
and <EMBED>
tags to embed the chart
in an HTML page. This method of embedding is known as direct HTML embedding.
However, with the recent updates in the way Internet Explorer handles
ActiveX Object (Flash is ActiveX Object), end users would first be required
to click the chart to activate it. Shown below is an example:
|
|
|
Until the user clicks the chart, he wouldn't
be able to interact with the chart i.e., the tool tips and links won't
function. This can sometimes be misleading when you've links in your chart.
|
| |
|
As a solution to the above "Click to
activate..." problem, you'll need to use JavaScript to embed FusionCharts
in your HTML pages. When you use JavaScript to write the tags for an ActiveX
object, Internet Explorer doesn't display the above border and message,
and the objects do not need to be activated by clicking.
To make things easier, we've provided a JavaScript class named as FusionCharts
,
which helps you do the same in a very user-friendly way. This class can
be found in Download Package > JSClass
folder. The file is named as FusionCharts.js
.
|
| |
| We wouldn't cover the technical details
of this class. If you're interested in that, you can directly see the source
of the JavaScript Class file. Instead, we'll see usage examples of this
class here. |
| |
| Let's now modify our previous Column 3D Chart
(My First Chart) example to use this JavaScript class to embed the chart.
|
| |
|
Since all of your pages that contain FusionCharts
would now use this JavaScript class, it's a better idea to keep this JS
file in a root folder, which is globally accessible. We copy this file
into our previously created FusionCharts
folder, which already contains the chart SWF files. Copying here makes
sure that all the charts and this JS file can be used in all pages from
this central location.
|
| |
|
We'll now modify our HTML page to use this
class to embed the chart.
Create a copy of Chart.html
and save
it as JSChart.html
in the same folder.
Make the following changes to it:
|
<html>
<head>
<script language="JavaScript"
src="../FusionCharts/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="chartdiv" align="center">The
chart will appear within this DIV. This text will be replaced by the chart.</div>
<script type="text/javascript">
var myChart = new FusionCharts("../FusionCharts/Column3D.swf",
"myChartId", "900", "300", "0",
"0");
myChart.setDataURL("Data.xml");
myChart.render("chartdiv");
</script>
</body>
</html>
|
| |
|
Here, we first include the FusionCharts
JavaScript class file using:
|
| <script language="JavaScript"
src="../FusionCharts/FusionCharts.js"></script>
|
| |
|
Create a DIV in the page body with a unique
id (chartdiv
in example above).
|
| <div id="chartdiv" align="center">...</div> |
| |
|
Instantiate a chart using the following code:
|
| var myChart =
new FusionCharts("../FusionCharts/Column3D.swf", "myChartId",
"900", "300", "0", "0");
|
|
Here, myChart
is the name of the JavaScript object that contains reference to our chart.
As parameters, we pass:
- URL of SWF file of the chart type that we intend to use
- Id for the chart - You can give any id for the chart. Just make sure
that if you're using multiple charts in the same HTML page, each chart
should have a unique Id.
- Required width and height of the chart.
- The last two parameters are debugMode
and
registerWithJS
and are normally set
to 0. We'll explain those parameters later.
Convey the XML data path to the chart using:
|
| myChart.setDataURL("Data.xml");
|
| |
|
Finally, render the chart by calling render()
method of the class and specifying the Id
of the DIV which we want the chart to occupy.
myChart.render("chartdiv");
When you now run this page in Internet Explorer, you'll see the same
old Column 3D chart - but the "Click to activate..." message
wouldn't show up. Also, you won't be required to click the chart to activate.
|
相关推荐
FusionCharts Widgets PowerCharts3.2 _制作报表插件
FusionCharts Widgets PowerCharts3.2 破解版
FusionCharts V3使用文档.pdf
Fusioncharts V3 破解版,Fusioncharts,Fusioncharts V3 破解版,Fusioncharts,Chm帮助文档
【FusionCharts v3】是一款强大的JavaScript图表库，它提供了丰富的可视化效果，可用于创建互动式、动态的Web图表。这款工具适用于那些希望在网站或应用中以直观方式展示数据的开发者。通过使用FusionCharts v3，你...
FusionCharts v3是该库的一个版本，提供了多种图表类型，如柱状图、线图、饼图、甘特图等，以及丰富的自定义选项，以满足不同数据可视化需求。在这个" FusionCharts v3图表 例题"中，我们将会深入探讨其核心功能和...
FusionCharts v3是一款强大的数据可视化工具，专用于创建各种动态图表和图形，尤其在股票市场分析中表现突出。这款软件能够帮助用户直观地理解复杂的数据，并通过多种图表类型，如K线图、成交量柱状图和饼图，提供...
FusionCharts V3常用破解.rar
FusionCharts V3的大企业版本，去除水印，增加了几个功能模块，大家放心试用。
**FusionCharts V3 手册与示例代码详解** FusionCharts 是一款强大的JavaScript图表库，它能够帮助开发者创建出交互式、丰富多彩的图表，适用于网页和Web应用中的数据可视化。FusionCharts V3是该产品的第三个主要...
FusionCharts是InfoSoft Global公司的一...此版本为FusionCharts之PowerCharts v3.2.1，里面的Flash文件已经去除掉LOGO，仅限个人用户学习使用。商业开发请购买正版。 FusionCharts官网：http://www.fusioncharts.com/
【FusionCharts V3 新特性】是InfoSoft Global公司针对其Flash图表组件FusionCharts的一次重大升级。FusionCharts是一款强大的、跨平台、跨浏览器的图表解决方案，它能够无缝集成到多种Web开发技术中，如ASP.NET, ...
### FusionCharts v3.X功能特性参数详解 #### 一、动画与显示设置 - **animation**: 表示是否启用图表的动画效果，默认为1（True），即开启动画。 - **showNames**: 指定是否显示X轴上的标签，默认值为True。 - **...
里面有完整的api和详细的例子，45万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案。类似Excel的表格设计方式，大大减少开发代码量和开发周期。 丰富的图表可视化类型，使设计既方便，又美观。
FusionCharts v3 源码，值得学习，经典。 117
FusionCharts v3, FusionWidget, FusionMaps 破解swf集合 已试过FusionCharts 和FusionWidget是可以用的,没有了那个讨厌的链接,FusionMaps 还没试,应该也可以用. 希望可能帮到大家
《PowerCharts_Eval：深化理解股票走势图在FusionCharts v3升级版的应用》 PowerCharts是专门用于绘制高质量图表的工具，尤其在金融数据分析领域，如股票市场走势展示，具有广泛的应用。在FusionCharts v3的升级版...
在标签"v3"的提示下，我们可以推断这里讨论的是FusionCharts的第三版本，一个具有高度定制化和多样化的图表库。下面将详细阐述FusionCharts V3的相关知识点。 FusionCharts V3的核心特性： 1. **丰富的图表类型**...
PowerCharts和FusionCharts是两个在IT行业中广泛使用的图表库，尤其在数据可视化领域非常流行。它们都是基于Flash技术的图表解决方案，能够帮助开发者创建出交互式、动态且美观的数据图表，适用于各种Web应用程序和...
FusionCharts是一款强大的JavaScript图表...总的来说，通过深入研究FusionCharts v3的源码，开发者不仅可以提升图表开发技能，还能学习到JavaScript和Flash编程的最佳实践，这对于任何Web开发者的成长都是非常有益的。