彩票走势图

Flash图表组件FusionCharts帮助文档三:在iPhone/iPad中生成JavaScript图表

原创|其它|编辑:郝浩|2012-11-07 15:04:05.000|阅读 2486 次

概述:鼎鼎有名的Flash图表组件 FusionCharts 不再仅仅支持Flash,它还可以在不支持Flash Player 的Web浏览器(如iPhone/iPad)上创建纯JavaScript 图表(有时也被称为HTML5/Canvas图表)。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

鼎鼎有名的Flash图表组件 FusionCharts 不再仅仅支持Flash,它还可以在不支持Flash Player 的Web浏览器(如iPhone/iPad)上创建纯JavaScript 图表(有时也被称为HTML5/Canvas图表)。

FusionCharts利用Highcharts库,最关键的是,你无需编写任何额外的代码,FusionCharts.js JavaScript类会自动探测不支持Flash的设备,并生成JavaScript图表。

FusionCharts JavaScript类现在包括四个主要文件:FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js and jquery.min.js。这四个文件放在Download Pack > Charts folder中。你需要把FusionCharts.js放入网页中,余下的JavaScript文件就会自动根据FusionCharts.js的指令进行加载。

在不支持Flash Player的地方启动Flash和JavaScript渲染,示例代码如下:

<html>
 <head>
  <title>My First chart using FusionCharts - Using JavaScript</title>
  <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
 </head>
 <body>
  <div id="chartContainer">FusionCharts will load here!</div>
  <script type="text/javascript"><!--
     var myChart = new FusionCharts("FusionCharts/Column2D.swf", "myChartId", "400",
                                    "300", "0", "1" );
     myChart.setXMLUrl("Data.xml");
     myChart.render("chartContainer");
  // -->
  </script>
 </body>
</html>

iPhone,FusionCharts,JavaScript图表

iPad,FusionCharts,JavaScript图表

如果你只想渲染JavaScript图表,只需添加下面这行代码:

FusionCharts.setCurrentRenderer('javascript')

这行代码将询问FusionCharts渲染器,跳过Flash渲染,直接创建一个纯JavaScript图表。如果你想将这行代码应用到所有的图表,你只需在最开始声明,而不需要在页面的每个图表都声明,示例代码如下:

<html>
  <head>     
    <title>My First chart using FusionCharts - Using pure JavaScript</title>     
    <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
  </head>
  <body>     
    <div id="chartContainer">FusionCharts will load here!</div>          
    <script type="text/javascript"><!--
      FusionCharts.setCurrentRenderer('javascript');
      var myChart = new FusionCharts( "FusionCharts/Column2D.swf", "myChartId", "400",
                                      "300", "0", "1" );
      myChart.setXMLUrl("Data.xml");
      myChart.render("chartContainer");
    // -->  
    </script>        
  </body> 
</html>

效果图:


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP