In the previous articleArticleWe made the first graphic report, we directly use the <Object> and <embed> tags in HTML to load the image (fusioncharts free use document tutorial Chapter 3-fusioncharts free my first image ). In fact, we can also use a javascript class provided by FCF to load graphics. There are several advantages to using JavaScript:CodeThe amount is greatly reduced, especially when there are several images on a page. Second, the code is more intuitive. Third, you can avoid the prompt "click to activate using this control" on IE.
Load with JS
This JS file is in the fusionchartsfree> jsclass folder, and we copy it to c: \ fusioncharts.
Now let's copy the original chart.htmlfile and name it jschart.html. To avoid direct modification to chart.html,
The following describes the jschart.html code.
View sourceprint?
03 |
script language =< /code> "JavaScript" SRC = ".. /fusioncharts. JS " > script > |
05 |
<Body Bgcolor="# Ffffff"> |
06 |
Div id =< /code> "chartdiv" align = " center " the image appears in the div, the word here will be replaced by the image Generation. Div |
07 |
<Script Type="Text/JavaScript"> |
08 |
VaR MyChart = new fusioncharts ("../fusioncharts/fcf_column3d.swf", "mychartid", "600", "500 "); |
09 |
MyChart. setdataurl ("data. xml "); |
10 |
MyChart. Render ("chartdiv "); |
The above code is explained as follows.
First, we use the following statement to load the fusioncharts. js file.
<Script language ="JavaScript"Src ="../Fusioncharts. js"> </SCRIPT>
Then, we define a div with an ID.
<Div ID="Chartdiv" Align="Center">The graph will appear in this Div, and the word here will be replaced by the graph.</Div>
Our graph is displayed in this Div.
Then, we use four parameters to create a fusioncharts object,
VaRMyChart =NewFusioncharts ("../Fusioncharts/fcf_column3d.swf","Mychartid","600","500");
The first parameter is the address of the SWF file.
The second is the image ID. You can call this ID as needed, but note that this ID must be unique when there are multiple images in a page.
The third parameter is the image width.
The fourth parameter is the image height.
We also need to set the data file address.
MyChart. setdataurl ("Data. xml");
Finally, we render the image in a specified place.
MyChart. Render ("Chartdiv");
"Chartdiv" is the ID of the previous Div, which indicates render the image to "chartdiv ".
Now you can run jschart.html to see the same effect as chart.html. Obviously, using JavaScript to load images is more convenient and intuitive.
Multiple images
Sometimes we need to display multiple images on a single page. For example, we use pie chart, bar chart, graph, and area chart to show the sales situation of each month, users can choose the desired one.
How can I load multiple images? It's easy. Let's take a look.
View sourceprint?
<Head> <Title> Multiple images </Title> |
<Script Language="JavaScript" SRC="../Fusioncharts. js"> </Script> |
<Body Bgcolor="# Ffffff"> |
<Div ID="Chartdiv1" Align="Center"> First chart container pie 3D </Div> |
<Script Type="Text/JavaScript"> |
VaR mychart1 = new fusioncharts ("../fusioncharts/fcf_pie3d.swf", "mychartid1", "600", "400 "); |
Mychart1.setdataurl ("data. xml "); |
Mychart1.render ("chartdiv1 "); |
Div id =< /code> "chartdiv2" align = " center " second chart container column 3D Div > |
<Script Type="Text/JavaScript"> |
VaR mychart2 = new fusioncharts ("../fusioncharts/fcf_column3d.swf", "mychartid2", "600", "300 "); |
Mychart2.setdataurl ("data. xml "); |
Mychart2.render ("chartdiv2 "); |
Div id =< /code> "chartdiv3" align = " center " third chart Container Line 2D Div > |
<Script Type="Text/JavaScript"> |
VaR mychart3 = new fusioncharts ("../fusioncharts/fcf_line.swf", "mychartid3", "600", "300 "); |
Mychart3.setdataurl ("data. xml "); |
Mychart3.render ("chartdiv3 "); |
Div id =< /code> "chartdiv4" align = " center " fourth chart container area 2D Div > |
<Script Type="Text/JavaScript"> |
VaR mychart4 = new fusioncharts ("../fusioncharts/fcf_area2d.swf", "mychartid4", "400", "250 "); |
Mychart4.setdataurl ("data. xml "); |
Mychart4.render ("chartdiv4 "); |
The above four graphic codes are actually the ID of the DIV, the name of the fusioncharts object, the ID of the image, and the SWF address of the image. The final effect is as follows:
Related documents:Fusioncharts3v cracked Version Download
Detailed description and features of fusioncharts Parameters
Fusioncharts free User Guide Chapter 1-Introduction to fusioncharts free
Fusioncharts free User Guide Chapter 2-fusioncharts free installation
Fusioncharts free User Guide Chapter 3-fusioncharts free my first graph
Address: http://www.cnblogs.com/ATree/archive/2010/06/22/FusionCharts-Free-JavaScript.html
