|
|
|
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.
|
相关推荐
《PowerCharts_Eval：深化理解股票走势图在FusionCharts v3升级版的应用》 PowerCharts是专门用于绘制高质量图表的工具，尤其在金融数据分析领域，如股票市场走势展示，具有广泛的应用。在FusionCharts v3的升级版...
"v3"指的是FusionCharts产品系列的第三版，这个版本可能包含了性能优化、新的图表类型和API更新，以及对不同浏览器和设备更好的兼容性。在描述中提到的“破解”通常意味着寻找绕过授权验证的方法，这在法律上是不被...
本文将深入探讨FusionCharts v3的帮助文档，该文档详细介绍了如何使用这款图表库，以及如何实现各种功能。 首先，FusionCharts v3的核心特性包括支持超过90种不同类型的图表，如柱状图、线图、饼图、地图等，能满足...
需要注意的是，PowerCharts Plug-in并不包含在FusionCharts v3 Suite的标准组件中，需要额外购买。 #### 二、FusionCharts版本更新要点 - **v3.1版本更新**: - 客户端、服务器端导出图表为PDF和图像的功能。 - ...
- **注意**：PowerCharts Plug不是FusionCharts v3 Suite的标准组成部分，需额外购买。 #### FusionCharts V3.1版本更新说明 - **新增功能**： - 客户端/服务器端导出图表为PDF或图像 - 支持旋转文本无需嵌入...