99精品热这里只有精品,中文字幕专区,国产1区精品

JS圖表控件FusionCharts使用教程：如何使用JavaScript渲染iPhone/iPod/iPad圖表

原創|使用教程|編輯：郝浩|2013-09-04 11:49:37.000|閱讀 1399 次

概述：FusionCharts XT允許用戶創建建立JavaScript圖表(也就是web上的HTML5 /Canvas圖表)。這個特性允許用戶在不支持Flash播放器的web瀏覽器上創建圖表,如iPhone / iPad。

相關鏈接：

FusionCharts使用JavaScript:

FusionCharts XT允許用戶創建建立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>

JS圖表控件FusionCharts使用教程：如何使用JavaScript渲染iPhone/iPod/iPad圖表

指定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最新版

標簽：

本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn

文章轉載自：慧都控件網

上一篇：如何在思維導圖軟件TheBrain中設置連接類型和連接方向下一篇：TVideoGrabber教程：混合視頻源（2）