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

时间 2019-11-08

标签 fusioncharts 使用 javascript 渲染 iphone ipod ipad 图表栏目 JavaScript 繁體版

原文原文链接

FusionCharts使用JavaScript: javascript

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

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

FusionCharts是如何工做的： jquery

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

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

一旦FusionCharts肯定设备中没有可用的Flash player,它将自动切换渲染模式为JavaScript。若是你但愿JavaScript渲染图表做为默认设置,也能够经过代码进行设置。 spa

让咱们来看看在Flash和JavaScript渲染均可用的状况下,只有JavaScript渲染生效的代码: code

<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渲染图表: xml

若是只但愿渲染JavaScript图表，那么就使用以下代码： htm

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