fusioncharts 汉化 3-1

    位置：第三章创建你的第一个图表 >> 创建你的第一个图表

     

    创建你的第一个图表

    在这里，我们将引导您创建第一个图表的过程。对于一个良好的开端，我们将创建一个简单的三维柱形图直观地描绘每月销售摘要。

    这个例子使用简单的HTML嵌入方法，它不是嵌入FusionCharts的推荐的方法 - 在这里，我们如此操作是为了便于理解它。我们建议使用FusionCharts的JavaScript类嵌入所有的图表，因为这能解决跨浏览器的处理很多问题。

    要使用FusionCharts创建人和图表，你都需要做三件事情

    1. 你要创建SWF文件中的图表。我们要创建一个三维柱形图，它的SWF文件是Column3D.swf命名。所有的SWF文件图表在 下载包 > Charts 文件夹中.
    2. XML 数据文件. FusionCharts的只接受在预先定义的XML格式的数据。所以，你需要你的数据转换为XML格式 - 无论是使用服务器端脚本语言或手动。.
    3. HTML 包装文件. 这个HTML文件将包含代码嵌入图表。

    在我们得到上述项目前让我们先创建一个新的文件夹，将作为我们对我们的检查和研究。在你的计算机上创建一个新文件夹名为C\FusionCharts。我们将保持这个文件夹内所有的例子.

     
    在文档中讨论的所有例子都在下载包中的Code 文件夹中.
     
    设置图表的SWF

    现在，为了建立图表，我们需要复制该文件夹内的SWF文件。在此之前，另一个文件夹FusionCharts的创建在c:\FusionCharts的，因此，新的文件夹看起来像C:\FusionCharts的\FusionCharts的。此文件夹将是我们所有的SWF文件图表容器。

    复制所有的图表SWF文件(从下载包> Charts文件夹)到新创建的文件夹 (c:\FusionCharts\FusionCharts\).

    作为该文件夹的图表核心位置。我们所有的例子将使用这一个文件夹中包含的图表。

     
    当你在你的网站上使用FusionCharts的时候，在一个文件夹名为FusionCharts的根级别文件夹下存放所有的SWF文件是个明智之举.这可以确保您不会使用同一图表SWF的多个副本。因此更新图表变得很容易，你只需要在一个地方复制粘贴新的图表。

     

    现在的SWF文件被设置了，我们继续前进，看看如何创建我们的图表的XML数据.

     
    创建XML数据文档

    在我们建立的图表之前我们首先需要这些图表的数据。由于我们正在汇总每年的月度销售，我们的数据以表格形式将看起来象下面这样的东西。下面给出用三维柱形图表示的每月数据

     
    月
    净收入
    January
    $17400
    February
    $19800
    March
    $21800
    April
    $23800
    May
    $29600
    June
    $27600
    July
    $31800
    August
    $39700
    September
    $37800
    October
    $21900
    November
    $32900
    December
    $39800
     

    现在，正如刚才所说，FusionCharts需要预先定义的XML格式的数据。除了从XML它不能读取任何其他的格式（包括Excel，CSV或其他文本数据格式）。因此，我们需要把这些数据转换成XML

    您可以使用可视化的XML生成工具转换成XML此表格数据。参见“对一般用户指南”一节说明。

    转换后的XML数据如下:

    <chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
        <set label='January' value='17400' />
        <set label='February' value='19800' />
        <set label='March' value='21800' />
        <set label='April' value='23800' />
        <set label='May' value='29600' />
        <set label='June' value='27600' />
        <set label='July' value='31800' />
        <set label='August' value='39700' />
        <set label='September' value='37800' />
        <set label='October' value='21900' />
        <set label='November' value='32900' />
        <set label='December' value='39800' />
    </chart>

    在文本编辑器（如记事本）中编辑上述代码并把它保存在Data.xml,位置在 c:\FusionCharts\MyFirstChart 文件夹.

    是的 - 不用担心你刚才写什么意大利面条的东西 - 我们将很快覆盖他们。基本上，我们上述所做的可以列出以下几点：:

    • 我们已经创建了根<chart>元素的几个属性，来定义标题，坐标轴的名称和号码前缀字符，以包括一切.
    • 对于每一个数据行，我们创建了一个 <set>标签元素. label元素表示我们要绘制的的月度名称和值.

    正如一项措施，以检查是否该XML文档是有效的结构，在浏览器中打开该文件。您应该能够看到一个格式化的XML数据文档的方式，没有任何错误。.

     
    为图表创建HTML容器
    每个图表需要在一个HTML文件中嵌入才能查看，因此，为了显示图表，我们也要为它创建一个HTML容器。打开你的文本编辑器敲下如下代码:
    <html>
       <head>
          <title>My First FusionCharts</title>
       </head>
       <body bgcolor="#ffffff">
          <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&chartWidth=900&chartHeight=300">
             <param name="quality" value="high" />
             <embed src="../FusionCharts/Column3D.swf" flashVars="&dataURL=Data.xml&chartWidth=900&chartHeight=300" quality="high" width="900" height="300" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
          </object>
    </body>
    </html>
    在MyFirstChart 文件夹下，保存文件为 Chart.html .

    上面的代码是实际代码，您需要在您的页面上嵌入一个FusionCharts的图表.

    在上述代码中，我们进行了：

    • 使用 <OBJECT> 和 <EMBED> 标记在HTML页面中嵌入3D柱状图(Column3D.swf).
    • 使用 &dataUrl=Data.xml 在 FlashVars 参数来显示图表的数据源 – Data.xml . 这种显示数据的方法称为提供数据的dataURL 方法.
    • 图表高度900宽度300，这在FlashVars中用chartWidth和chartHeight变量。
     

    要在浏览器中正确显示Flash影片，网页应包含特定的标记，指定Flash电影文件被打开并播放。有两个标签是实现此目的的：<OBJECT>和<embed>标签

    这两个标签必须不同的互联网浏览器正确显示Flash影片.<OBJECT>标记是使用在微软Windows的Internet Explorer中。<embed>标记是使用在Microsoft Windows或Mac操作系统的Netscape Navigator中。这两个关键字的每个行为使用同样的方式，只使用一个标记可能会导致不兼容的浏览器问题。为了确保大多数浏览器正常显示您的Flash电影，你必须把<embed>标记和<OBJECT>标记内嵌套如示例所示。启用ActiveX的浏览器将忽略<OBJECT>标记内的<embed>标记。老的微软浏览器和Netscape不在承认<OBJECT>标记，并只使用<embed>标签加载Macromedia Flash播放器

     
    现在是时候展示你为第一个图表所作的努力了。在你的首选浏览器中打开chart.html。您现在应该看到一个像这个图表（以下图片已被调整大小 - 实际的图表将更大，更清晰）：

    我们只是证明了它是多么容易创建图表FusionCharts的。下一步，我们将告诉你如何能够非常容易地把此图表转换此成一个饼图

    在这个例子中，FusionCharts为您的数据自动选择默认调色板。要在图表上的自定义颜色配置，你可选择预先定义的调色板，或指定全局调色板的颜色，或单独为每列指定为一个16进制颜色如 <set label='January' value='232323' color='FF0000' />

     
    疑难解答

    如果由于某种原因，你没有看到类似的上面图表显示，通过运行以下检查：

    如果在你的浏览器中看到无尽的加载进度或者如有你右击菜单（图表的任何地方右击）显示“影片未加载”，检查如下:

    • 是否你的图表SWF文件粘贴在FusionCharts的文件夹中
    • 是否在你的 Chart.html 文件中提供了SWF路径属性?
    • 是否在浏览器上安装Adobe Flash Player 8（或以上）插件?
    • 是否确保你的浏览器支持ActiveX控件，正常情况下，所有的浏览器都支持Flash的。

    如果显示“Error in Loading Data”信息，请检查以下内容

    • 是否Data.xml文件和Chart.html在同一文件夹内?
    • 是否Data.xml名称为Data.xml而不是Data.xml.txt,很多基本的文本编辑器都追加.txt后缀的?

    如果显示"Invalid XML Data"信息，这意味着XML数据文件格式不正确的。检查一遍像常见的错误:

    • 标签的差异. <chart> 应该以</chart>结束而不是 </Chart>或者 </CHART>
    • 缺少开/关属性引号如, <chart caption=Monthly Sales' 应当为<chart caption='Monthly Sales'
    • 缺少任何元素的结束标记.

    检查您的最终XML是好的，在浏览器中打开它，你会看到错误.

posted @ 2010-07-01 16:21  天生我豺  阅读(1342)  评论(0)  编辑  收藏  举报