|
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图表 例题
FusionCharts v3.X功能特性参数介绍,呵呵,比较详细的文档
FusionCharts V3常用破解.rar
FusionCharts V3的大企业版本,去除水印,增加了几个功能模块,大家放心试用。
FusionCharts是InfoSoft Global公司的一...此版本为FusionCharts之PowerCharts v3.2.1,里面的Flash文件已经去除掉LOGO,仅限个人用户学习使用。商业开发请购买正版。 FusionCharts官网:http://www.fusioncharts.com/
里面有完整的api和详细的例子,45万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案。类似Excel的表格设计方式,大大减少开发代码量和开发周期。 丰富的图表可视化类型,使设计既方便,又美观。
FusionCharts v3 源码,值得学习,经典。 117
FusionCharts v3, FusionWidget, FusionMaps 破解swf集合 已试过FusionCharts 和FusionWidget是可以用的,没有了那个讨厌的链接,FusionMaps 还没试,应该也可以用. 希望可能帮到大家
javascript报表,非常经典。FusionCharts v3源码
fusioncharts+widgets+powercharts破解,v3,替换就可以了。
FusionCharts v3 一套基于flash的chart程序,google的网站访问分析系统中的flash图表就处于此公司。该压缩包中包含帮助文件,相关的flash文件释放出来直接能用。
文件包含最新可用版本FusionMaps版本3.2 官方下载请见http://www.fusioncharts.com/ 从官方下载后把说明里面...FusionCharts Widgets PowerCharts V3.2最新可用版本 下载地址:http://download.csdn.net/source/2978480
文件包含FusionMaps最新可用版本V3.2 官方下载请见http://www.fusioncharts.com/ 从官方下载后把说明里面的...FusionCharts Widgets PowerCharts V3.2最新可用版本 下载地址:http://download.csdn.net/source/2978480
FusionCharts+WidgetsCharts+PowerCharts_V3.2.1破解版。 截止到今天,官网上最新为3.2.2,本破解版为3.2.1,其中FusionCharts带js文件,WidgetsCharts和PowerCharts只有swf文件。 请将附件中的swf和js覆盖掉原有...
实现各种股票走势图,如:K线图、成交量(柱状图)、饼图等。
FusionCharts V3 Enterprise edition