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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。