FusionCharts中文用户手册一：绘制3D柱状图与参数介绍-控件新闻-慧都网

FusionCharts中文用户手册一：绘制3D柱状图与参数介绍

原创|其它|编辑：郝浩|2013-01-16 14:53:57.000|阅读 2022 次

概述：在ASP中使用FusionCharts可以绘制动态数据驱动图表。在本文中，我们将通过一些简单的代码示例来帮助你了解如何在ASP中使用FusionCharts XT创建一个3D图表并熟悉相关图表参数。

设置图表

在我们的代码中，我们需要使用图表和JavaScript类文件。它们包含在Download Package > Code > FusionCharts 文件夹中。当你运行示例时，你需要确认SWF文件处于正确的位置。

绘制图表

在这个例子中，我们将使用Data URL 方法来创建一个"Monthly Unit Sales"。首先，我们需要在XML数据文件的Data.xml 文件中手动编写XML数据，然后，然后将其利用到ASP页面 (SimpleChart.asp)的图表上。

XML数据文件的代码如下：

<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0' formatNumberScale='0' showBorder='1'>
<set label='Jan' value='462' />
<set label='Feb' value='857' />
<set label='Mar' value='671' />
<set label='Apr' value='494' />
<set label='May' value='761' />
<set label='Jun' value='960' />
<set label='Jul' value='629' />
<set label='Aug' value='622' />
<set label='Sep' value='376' />
<set label='Oct' value='494' />
<set label='Nov' value='761' />
<set label='Dec' value='960' />
</chart>

该XML数据文件被存放在BasicExample文件夹中的Data文件夹中。该数据文件中基本包含了"Monthly Unit Sales"单系列图表所需要的数据。我们将使用这些数据来绘制一个3D图表。

要绘制包含了上述数据的3D图表，你需要将 HTML 和JavaScript 代码嵌入到图表对象，然后提供必要的参数。为了简化操作， ASP函数renderChart()中的包含了该功能。renderChart()函数位于Download Package > Code > ASP > Includes > FusionCharts.asp文件夹中。

SimpleChart.asp文件中包含以下可用于渲染图表的代码：

<%
'We've included ../Includes/FusionCharts.asp, which contains functions
'to help us easily embed the charts.
%>
<!-- #INCLUDE FILE="../Includes/FusionCharts.asp" -->
<HTML>
<HEAD>
<%
'You need to include the following JS file, if you intend to embed the chart using JavaScript.
'When you make your own charts, make sure that the path to this JS file is correct. Else, you
'will get JavaScript errors.
%>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
<TITLE>FusionCharts XT - Simple Column 3D Chart</TITLE>
</HEAD>
<BODY>
<%
'Create the chart - Column 3D Chart with data from Data/Data.xml
Call renderChart("../../FusionCharts/Column3D.swf", "Data/Data.xml", "", "myFirst", 600, 300, False, True)
%>
</BODY>
</HTML>

根据上述代码可知，我们需要具备以下几点：

1、拥有可帮助我们创建图表的FusionCharts.asp。
2、需要添加FusionCharts.js文件，用于生成图表，处理事件以及提供高级功能。
3、调用renderChart函数渲染图表。要实现次该功能，你需要使用下列参数：

chartSWF参数：你即将绘制的图表的SWF文件名和路径。在本文中，我们将绘制一个3D图表，所以我们需要指定：../../FusionCharts/Column3D.swf

dataUrl参数：如果你想使用Data URL方法，你需要将URL作为参数。否则，将其设置为“”。在本文中，我们使用了Data.xml 文件，所以我们指定：Data/Data.xml。

dataStr参数：如果你想使用 Data String 方法，你需要将 XML/JSON Data String作为参数。

chartId参数：图表ID，每个图表的ID是唯一的。考虑到浏览器的兼容性，建议图表ID不要以数值和空格开头。

chartWidth参数：图表宽度（像素或百分比），如"400"或者"100%"。

chartHeight参数：图表高度（像素或百分比），如"400"或者"100%"。

debugMode参数：是否启动调试模式中的图表。同意启动设置为True，不同意设置为False。

registerWithJS参数：是否注册JavaScript图表。该参数值始终被设置为True。