FusionCharts 技术文档-JavaScript (HTML5)

Explicitly render JavaScript only charts

(明确地呈现只支持Javascript的表)

从FusionCharts XT - 服务第3版开始,您可以指定的JavaScript图表别名(如图表列表“页面中列出的),而不是图表SWF文件名创建一个纯JavaScript图表。下面的代码片断演示了这是如何实现的:

<html>
  <head>
    <title>Creating Pure JavaScript chart</title>
    <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
  </head>
  <body>
    <div id="chartContainer">FusionCharts XT will load here!</div>
    <script type="text/javascript"><!--
         
      var myChart = new FusionCharts( "Column3D", "myChartId", "400", "300" );
      myChart.setXMLUrl("Data.xml");
      myChart.render("chartContainer");
    // -->
    </script>
  </body>
</html>

In the above code, instead of Column3D.swf we have specified Column3D, the JavaScript chart alias. Based on the JavaScript chart alias provided, FusionCharts JavaScript Class renders the respective JavaScript chart.

 

 

您也可以选择使用SWF文件的名称及其路径的JavaScript图表来呈现。对于这一点,你只需要添加一行代码,如下所示:

此代码将要求FusionCharts渲染器的,跳过Flash渲染和创建纯JavaScript图表。

 

此设置被应用到这条线后呈现的所有图表。因此,如果你申报本文开头,在页面中的所有图表将使用JavaScript渲染。您将不再需要为每个图表在页面中声明相同的。

The modified code will look like the following:

<html>
  <head>        
    <title>My First chart using FusionCharts XT - Using pure JavaScript</title>        
    <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
  </head>  
  <body>    
    <div id="chartContainer">FusionCharts XT will load here!</div>          
    <script type="text/javascript"><!--

      FusionCharts.setCurrentRenderer('javascript');

      var myChart = new FusionCharts( "FusionCharts/Column3D.swf",
                    "myChartId", "400", "300", "0" );
     
      myChart.setXMLUrl("Data.xml");
     
       myChart.render("chartContainer");

    // -->  
    </script>      
  </body>
</html>

注意:许多浏览器会限制从JavaScript访问本地文件系统中,由于安全方面的原因。 JavaScript的图表,在本地运行时,将不能够访问一个网址提供的数据。如果您运行的文件从服务器,它会运行的精绝,虽然。然而,在本地运行时,如果您提供的数据作为字符串(使用的数据字符串的方法),它工作得很好。

点击这里查看代码使用的数据字符串的方法»

转载于:https://www.cnblogs.com/leecheeme/archive/2013/04/27/3046333.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值