文档章节

FusionCharts使用JavaScript渲染iPhone/iPod/iPad图表

 答应不爱你
发布于 2013/09/04 14:24
字数 569
阅读 266
收藏 1

FusionCharts使用JavaScript:

FusionCharts允许用户创建建立JavaScript图表(也就是web上的HTML5 /Canvas图表)。这个特性允许用户在不支持Flash播放器的web浏览器上创建图表,如iPhone / iPad。FusionCharts内部利用Highcharts库生成JavaScript图表。

这个功能能够无缝地使用当前的FusionCharts实现模式。不需要任何额外的代码来实现。FusionCharts的JavaScript类自动检测不支持Flash的设备,并创建JavaScript图表。你也可以忽略Flash,并只使用JavaScript生成图表。

FusionCharts是如何工作的:

FusionCharts XT提供一个全新的FusionCharts JavaScript类。 FusionCharts的JavaScript类现在包括四个主要文件:FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js和jquery.min.js。这四个文件存在于Download Pack > Charts folder。

用户有可能只需要在web页面中包括FusionCharts.js(当时注意,也需要复制其他文件到你的web应用程序)。其余的JavaScript文件将通过FusionCharts.js自动加载按需。

一旦FusionCharts确定设备中没有可用的Flash player,它将自动切换渲染模式为JavaScript。如果你希望JavaScript渲染图表作为默认设置,也可以通过代码进行设置。

让我们来看看在Flash和JavaScript渲染都可用的情况下,只有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>

 


 

指定JavaScript渲染图表:

如果只希望渲染JavaScript图表,那么就使用如下代码:

FusionCharts.setCurrentRenderer('javascript')

这段代码会让FusionCharts渲染器跳过Flash渲染并创建纯JavaScript图表。

这个设置可以应用到所有的渲染图表。因此,如果一开始开始就使用,该页面的所有图表都将使用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>

》》》FusionCharts最新版下载地址

© 著作权归作者所有

粉丝 3
博文 29
码字总数 15505
作品 0
襄樊
私信 提问
Flash图表组件FusionCharts使用教程大全

Flash图表组件FusionCharts使用教程一:调用静态方法RenderChart Flash图表组件FusionCharts使用教程二:为饼图/环形图添加图例 Flash图表组件FusionCharts使用教程三:在iPhone/iPad中生成J...

lanmeimei
2013/01/09
2.2K
5
FusionCharts常见问题FAQ及解决方法(FusionCharts 100问)

当你利用FusionCharts创建图表时报错,原因是多方面的。本文总结了一些常见问题及解决方法供大家参考,希望对大家有帮助。 FusionCharts 设置字体大小 FusionCharts服务器要求有要求吗? 如何...

flyingsnail
2014/04/25
2.5K
0
FusionCharts图表错误原因及调试方法大全

无标题文档 当你利用FusionCharts创建图表时报错,原因是多方面的。本文总结了报错的多种原因及调试方法供大家参考,希望对大家有帮助。 >>>查看调试方法 Fusioncharts的Javascript图表却显示...

panda456
2013/01/23
397
0
FusionCharts与HighCharts功能对比分析

选择一个图表组件是一项复杂的任务,因为选择图表时,既要考虑当前需要,又要能应对未来多变的复杂业务需求。 所以,在选择图表的时候,我们需要对图表有更深入的对比和研究。接下来,小编将...

flyingsnail
2014/04/18
548
0
Flash图表FusionCharts & Open Flash Chart选型分析

对企业而言,选择一款合适的图表控件是一项非常复杂的任务,因为所选择的图表控件不仅要符合目前的需求还需要考虑未来的需求变化因素。所以,在选择Flash图表的时候,你常常需要评估以下几点...

Leamontea
2012/11/30
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Excel数据透视表基础:数据透视表的正确数据格式

1.数据透视表:是一种数据分析方法, 一.使用数据透视表必须用正确的数据格式: 1.数据必须有标题: 2.数据表不能有相同的标题 3.数据表中不能有合并单元格 4.不能有 小计、合计、空行、分类...

东方墨天
14分钟前
3
0
聊聊nacos的NacosDiscoveryAutoConfiguration

序 本文主要研究一下nacos的NacosDiscoveryAutoConfiguration NacosDiscoveryAutoConfiguration nacos-spring-boot-project/nacos-discovery-spring-boot-autoconfigure/src/main/java/com/a......

go4it
47分钟前
4
0
如何保证消息的顺序性?

面试题 如何保证消息的顺序性? 面试官心理分析 其实这个也是用 MQ 的时候必问的话题,第一看看你了不了解顺序这个事儿?第二看看你有没有办法保证消息是有顺序的?这是生产系统中常见的问题...

米兜
52分钟前
8
0
网络安全市场需求

最近,网络安全技能差距的热门话题流传开来。技能差距经常被紧急讨论,可以看出它在实践中的作用是很大的。但信息安全是一门广泛的学科,所以在谈论“技能差距”时需要更具体。有专家表示,真...

linuxCool
今天
4
0
饿了么快应用初体验

作者:饿了么 顾诚 为什么我们选择了快应用 在很长一段时间里,原生饿了么应用对于新用户来说体验成本略高,对于迫切想要点餐的老用户操作有点繁琐;而 Web 版的饿了么应用在体验、速度、功能...

前端老手
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部