`
房价会降吗
  • 浏览: 64892 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

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

阅读更多

FusionCharts使用JavaScript:

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

 

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

FusionCharts是如何工作的:

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

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

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

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

 

  • 大小: 38.2 KB
  • 大小: 16.9 KB
1
3
分享到:
评论

相关推荐

    FusionCharts图表组件简单使用

    接着,使用`setDataURL`方法设置数据源的路径,最后用`render`方法将图表渲染到指定的`div`中。 示例代码如下: ```javascript var chart = new FusionCharts("/FusionCharts/Charts/Column3D.swf", "chartId", ...

    FusionCharts的Javascript和SWF文件

    FusionCharts是一款强大的数据可视化工具,它通过JavaScript和SWF(Shockwave Flash)文件来创建交互式的图表和图形。在本资源中,你将找到FusionCharts用于报表统计的必要组件,包括SWF对象和JavaScript库。下面...

    利用FusionCharts 实现数据图表展示

    2. **创建图表对象**:使用JavaScript创建FusionCharts对象,并设置图表的基本属性,如类型、宽度、高度、标题、数据源等。 3. **加载数据**:数据可以是内联的JSON字符串,也可以是从服务器异步获取的。如果你选择...

    fusionCharts是如何在网页呈现图表

    最后,使用`render()`方法将图表渲染到指定的HTML元素中。 通过这种方式,FusionCharts使得在网页上创建交互式图表变得简单易行,无论是在传统的Flash环境还是现代的HTML5环境中,都能提供一致的用户体验。开发者...

    用fusioncharts使用json格式数据展示图表

    4. **渲染图表**:最后,调用`render()`方法将图表渲染到指定的HTML元素中。 ```javascript chartObj.render(); ``` **交互式功能** FusionCharts提供了丰富的交互式功能,如工具提示、钻取、数据标签等。这些功能...

    Asp.net FusionCharts 示例

    FusionCharts是一款强大的JavaScript图表库,它能够帮助开发者轻松地在Web应用中添加丰富的图表功能。在Asp.net中使用FusionCharts,可以为你的网站或应用程序提供直观且引人入目的数据展示。 **1. 安装...

    利用FusionCharts XT为iPhone和iPad应用创建图表

    利用FusionCharts XT为iPhone和iPad应用创建图表的实例,支持重力感应。

    FusionCharts使用源码例C#

    FusionCharts是一款强大的JavaScript图表库,它提供了丰富的交互式图表,可用于展示数据的可视化效果。在C#开发环境中,FusionCharts可以与ASP.NET、WinForms或其他.NET框架结合使用,为应用程序添加美观的数据呈现...

    FusionCharts实例

    FusionCharts是一款强大的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,包括柱状图、饼图、折线图和蜡烛图等。这个实例将深入讲解如何利用FusionCharts来构建这些常见图表,以提升数据可视化...

    fusioncharts/3.3.1下载

    FusionCharts是一种制图组件,可以帮您为您的Web应用创建交互式的、数据驱动的图表、仪表盘和地图。它具有智能化、用户友好和创新等特点,可以将单调的数据转化为栩栩如生的图像,从而使您的Web应用更加的生动。它...

    FusionCharts 下钻和单击图上某个节点调用js函数

    为了更好地利用这些特性,你需要了解FusionCharts的API,包括如何配置图表对象、设置数据源、以及如何定义和使用JavaScript事件处理函数。在实际项目中,这些功能可以帮助你构建交互性强、用户体验良好的数据可视化...

    FusionCharts动态图表实现代码

    FusionCharts是一款强大的JavaScript图表库,它能够帮助开发者创建出丰富多样的互动图表,从而将复杂的数据以直观、美观的方式呈现出来。在这个“FusionCharts动态图表实现代码”压缩包中,你可能会找到一系列用于...

    FusionCharts图表制作插件

    在Java和JavaScript环境中使用FusionCharts,开发者可以通过以下步骤进行操作: 1. **安装和引入库**:首先需要在项目中引入FusionCharts的JavaScript库,通常通过CDN链接或本地文件引用。 2. **准备数据**:数据...

    fusioncharts图表

    使用FusionCharts,Web开发人员可以轻松地将JSON或XML数据源转化为生动的图表。它的API和JavaScript库提供了丰富的功能,如实时数据更新、动画效果、工具提示、点击事件处理等,使用户能够与图表进行深度交互。此外...

    Android上,使用FusionCharts进行图表控件封装

    &lt;script src="file:///android_asset/fusioncharts/fusioncharts.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;div id="chartContainer"&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; var chart = new FusionCharts({ type: "column...

    FusionCharts图表工具的技术参数

    - **iOS设备**:支持iPad、iPhone和iPod Touch(iOS 3.0+)。 - **Android设备**:支持2.2及以上版本,其中2.2需要Flash Player,而3.0+则支持JavaScript和Flash图表。 - **黑莓设备**:BB OS V6+版本。 ### 编程...

    FusionCharts_java后台工具

    在IT行业中,FusionCharts是一个广泛使用的图表库,它提供了丰富的图表类型以及强大的交互功能,使得数据可视化变得简单易行。本项目主要关注的是如何在Java后端与FusionCharts结合,通过JavaBean实体类、Action类...

    fusioncharts生成图表后导出图片

    标题中的“fusioncharts生成图表后导出图片”指的是使用FusionCharts这个JavaScript图表库来创建可视化图表,并且能够将这些图表导出为图像文件。FusionCharts是一款强大的数据可视化工具,它提供了丰富的图表类型和...

    FusionCharts v3图表 例题

    2. **创建图表对象**:使用JavaScript创建一个FusionCharts对象,指定图表类型、宽度、高度、数据源等属性。例如: ``` var chart = new FusionCharts("Column3D", "myChartId", "400", "300", "0", "1"); ``` 3...

Global site tag (gtag.js) - Google Analytics