`
zhouxueliang
  • 浏览: 35103 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

setDataXMl

阅读更多
在前面的例子中,我们使用了dataURL方法提供数据给FusionCharts.在dataURL方法中,数据包含在一个外部物体XML文件中(如data.xml)或者一个相关URL地址(如ReturnXMLData.asp)
此外,还存在另一种方法来提供XML数据给FusionCharts - dataXML方法.
在此方法中,XML数据存在相同的页面中,FusionCharts也是嵌入的。当使用此方法时,你不需要创建而外的XML文件(像data.xml),他在HTML页面提供。
当使用dataXML方法,你必须非常小心引号冲突. 例如,如果你在XML文档中的属性使用单引号,在你的HTNL页面中请务必使用双引号封装整个XMl字符串,以作为OBJECT/EMBED元素的属性. 加引号的冲突往往不会引起错误,但是可能会一直在想为什么图表没有被渲染(你会得到一个空白的空间而不是图表)
让我们快速看看上面的例子.

在直接嵌入的HTML页面中使用dataXML方法
创建一个chart.html的副本并另存为ChartDataXML.html此外,修改代码如下:

代码
<html>
<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="&dataXML=<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>">
   <param name="quality" value="high" />
   <embed src="../FusionCharts/Column3D.swf" flashVars="&dataXML=<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>" quality="high" width="900" height="300" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>

正如你在上面看到的,我们已经通过追加它作为FlashVars属性来提供完成的数据,格式如下:
<PARAM NAME="FlashVars" Value="&dataXML=completeXMLData">

在EMBED标记中, 你需要增加如下代码:
<EMBED ... FlashVars="&dataXML=completeXMLData">
这样你就可以从同一个页面中加载数据显示FusionCharts图表。

使用dataXML方法,同时使用JavaScript嵌入图表
如果您使用FusionCharts的JavaScript类嵌入图表,您可以使用dataXML为如下方式:
代码
<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.setDataXML("<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>");
     
      myChart.render("chartdiv");
   </script>

</body>
</html>
上面你可以清楚地看到,不使用setDataURL方法提供了XML文件的路径,在这里我们使用setDataXML方法,来提供完整的XML数据本身
现在查看图表,你会得到和以前相同的输出.

使用这种方法,然而,当数据量非常大时有时会出问题,发生此问题是由于浏览器dataXML字符串长度限制所导致。当你使用dataXML方法进行大数据量操作时,浏览器会忽略指定长度后面的数据。这将导致FusionCharts的挂起(什么都不会显示在屏幕上)完整的数据并没有提供给它。因此,在使用大数据量时候,建议使用dataURL方法。(基本上,在多系列/组合图表使用时)
分享到:
评论

相关推荐

    自己整理的FusionCharts(支持中文)

    本文将深入探讨如何利用FusionCharts在JavaScript中实现在图表中显示中文,包括`setDataXml()`和`setDataUrl()`两种方法的使用。 首先,让我们了解FusionCharts的基本结构。FusionCharts是由HTML、JavaScript和XML...

    FusionCharts画示例图

    chart.setDataXML('&lt;chart&gt;&lt;set label="产品A" value="1500" /&gt;产品B" value="2500" /&gt;&lt;/chart&gt;'); ``` 4. 渲染图表:调用`render()`方法将图表渲染到指定的HTML元素上。 ```javascript chart.render(...

    fusion charts free 中文开发指南第二版

    - **结合使用**:利用JavaScript动态生成XML数据,并通过`setDataXML()`方法加载到图表中。 - **实时更新**:支持根据用户操作实时更新图表数据。 **5.3 SETDATAXML()方法的问题** - **兼容性**:在不同浏览器中的...

    fusioncharts展示报表

    myChart.setDataXML("$'&gt;&lt;set label='January' value='17400' /&gt;&lt;set label='February' value='19800' /&gt;...&lt;/chart&gt;"); myChart.render("chartContainer"); ``` - 上述代码首先引入了FusionCharts库,...

    FusionCharts 使用手记

    "chartData", // 数据源 ID,若为空则使用 setDataXML 或 setDataURL { "caption": "月销售历史", "xAxisName": "月份", "yAxisName": "销售量", "numberPrefix": "$", // 数值前缀 "showValues": "1", // ...

    fusioncharts使用范例.

    调用`setDataXML()`方法,将之前创建的XML数据赋值给图表对象。这告诉FusionCharts如何绘制图表。 6. **渲染图表**: 使用`render()`方法,将图表渲染到之前定义的容器中,即`chart.render("chartdiv1")`。 ...

    FusionCharts相关资源文件

    例如,你可以使用`setJSONData()`或`setXMLData()`方法加载JSON或XML格式的数据,或者利用`setDataURL()`或`setDataXML()`方法从服务器获取数据。 此外,FusionCharts还提供了一套完整的API,允许开发者实现各种...

    FusionChart 工具类

    3. **加载数据**:数据可以来源于服务器或本地,通过`setDataURL()`或`setDataXML()`方法设置。如果数据是动态生成的,`FusionChartUtil.java`可能包含一个`generateChartData()`方法,用于处理和格式化数据。 4. **...

    FusionCharts v3图表 例题

    chart.setDataXML(xmlData); ``` 对于JSON,使用`setDataJSON`方法。 4. **初始化图表**:在设置好所有参数后,调用`render`方法来渲染图表: ``` chart.render("chartContainer"); ``` 5. **自定义图表**:...

    2D柱状图例子

    chartObj.setDataXML(JSON.stringify(data)); // data是上文的数据 chartObj.render("chartContainer"); // "chartContainer"是图表渲染的目标div ``` 4. **自定义配置**:FusionCharts允许用户通过设置各种属性...

    FusionChartsV3 使用案例

    myChart.setDataXML('&lt;chart&gt;&lt;dataset&gt;产品A" value="15000" /&gt;产品B" value="20000" /&gt;&lt;/dataset&gt;&lt;/chart&gt;'); ``` 5. **渲染图表**:最后,调用`render()`方法将图表渲染到指定的HTML元素中。 ```javascript ...

    FusionChartsJS-AJAX

    chart.setDataXML(data); // 设置数据源 chart.render(); // 渲染图表 }); ``` 6. **邮件联系人**: 提供的邮件地址`rapin@qq.com`可能是作者的联系方式,如果你需要更多图表类型或有其他问题,可以通过这个...

    FusionCharts Free中文开发指南.rar

    API函数包括`new FusionCharts()`、`render()`、`setDataXML()`等。 **5. 图表类型** FusionCharts Free支持多种图表类型,包括条形图、线图、饼图、圆环图、面积图等。每种图表都有特定的用途,比如条形图适合...

    FusionChartsFree使用范例

    myChart.setDataXML(JSON.stringify(chartData)); myChart.render("chartContainer"); ``` 5. **自定义图表**:FusionCharts提供了丰富的配置选项,允许用户定制图表的颜色、字体、工具提示、动画效果等。例如,...

    FusionCharts数据统计图

    myChart.setDataXML("&lt;chart ...&gt;&lt;/chart&gt;"); // 或 myChart.setDataString("{'chart': {...}, 'dataset': [...]}"); // 或 myChart.setJSONData(jsonData); ``` 4. **渲染图表**:在DOM元素准备就绪后,调用...

    FusionCharts教程

    chart.setDataXML('&lt;chart&gt;&lt;dataset&gt;一月" value="4000" /&gt;二月" value="4500" /&gt;三月" value="5000" /&gt;&lt;/dataset&gt;&lt;/chart&gt;'); chart.render(); // 渲染图表 ``` ### 4. 数据格式 FusionCharts支持多种数据格式,...

    JS各种图表

    myChart.setDataXML("data.xml"); myChart.draw(); ``` ### **XML数据格式** XML文件的结构应符合JS Charts 的规范,例如: ```xml ``` 这里的`dataset`标签定义了数据集,`data`标签则表示每...

Global site tag (gtag.js) - Google Analytics