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


    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最新版下载地址

  • 相关阅读:
    G. Yash And Trees 线段树 + dfs序 + bitset
    网络流最小割 H
    P2764 最小路径覆盖问题 网络流重温
    P4016 负载平衡问题 网络流重温
    D. Yet Another Subarray Problem 思维 难 dp更好理解
    J
    20190709 暑训 区间种类数 莫队的学习
    E
    线段树 离散化 E. Infinite Inversions E. Physical Education Lessons
    CbsPersist
  • 原文地址:https://www.cnblogs.com/shenqi/p/3300915.html
Copyright © 2020-2023  润新知