东京热不卡,日韩精美视频,日韩欧美在线a

HTML5和jQuery免費圖表庫jChartFX使用設置

原創|其它|編輯：郝浩|2013-02-04 14:59:59.000|閱讀 1641 次

概述：SoftwareFX已于推出一套為HTML5、jQuery和JavaScript開發者設計的免費圖表庫——jChartFX。而jChartFX非常的易于使用，你只需要添加一個html元素用于渲染圖表，然后使用JavaScript 或是jQuery來充分利用全面和強大的API用來配置和自定義圖表就可以了。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

SoftwareFX已于推出一套為HTML5、jQuery和JavaScript開發者設計的免費圖表庫——jChartFX。同時jChartFX非常的易于使用，你只需要添加一個html元素（通常是一個div）用于渲染圖表，然后使用JavaScript 或是jQuery來充分利用全面和強大的API用來配置和自定義圖表就可以了。

>>下載免費圖表庫jChartFX

在使用 jChartFX之前，需要將必要的 jChartFX 庫復制到瀏覽器能夠訪問的位置。例如，你可以在你的網站上創建一個名為 jChartFX的文件夾，然后簡單的拷貝所有的jChartFX 庫到目錄，接下來你可以通過添加<script>標簽引用到你頁面的<head>部分。

<head>
<link rel="stylesheet" type="text/css" href="chartfx.css" />
<script type="text/javascript" src="jChartFX/jchartfx.system.js"></script>
<script type="text/javascript" src="jChartFX/jchartfx.coreVector.js"></script>
</head>

接下來，需要定義一個html的DIV元素來承載頁面正文中的圖表，由DIV來控制圖表顯示的位置和尺寸。

<div id="ChartDiv" style="width:600px;height:400px;display:inline-block"></div>

由于我們希望圖表在頁面加載的時候生成，所以需要指定一個函數來處理onload事件，有很多種方法可以實現這個要求。如果使用的是一種particular框架，就可以簡單使用頁面的Body元素的onload屬性來實現：

<body onload="loadChart()">

若是使用的是JQuery 框架，你可以使用文檔的ready事件來實現：

$(document).ready(function($){

然后，我們需要在可以負載的功能范圍內聲明一個圖表變量：

<script type="text/javascript" language="javascript">
var chart1;        
 function loadChart()
 {        
chart1 = new cfx.Chart();
chart1.setGallery(Gallery.Pie);
var divHolder = document.getElementById('ChartDiv');
chart1.create(divHolder);
 }

</script>

調用圖表的創建方法是非常重要的，因為它將觸發圖表渲染到指定的DIV。或者不是通過一個DIV對象的創建方法，可以簡單地通過目標DIV的名字，刪除調用getElementById的需求：

chart1 = new cfx.Chart();
chart1.setGallery(Gallery.Pie);
chart1.create('ChartDiv');

對于JQuery用戶，可以在目標div中調用chart()：

<script language="javascript">
$(document).ready(function ($) {
 $("div", ".ChartDiv1").chart({
 gallery:cfx.Gallery.Pie
 });
});	        
  </script>

  通過以上這樣的簡單設置，就可以使用jChartFX進行圖表的配置了或是風格化圖表的樣式等。

標簽：

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

文章轉載自：慧都控件

上一篇：WPF圖表控件Chart FX使用方法系列:如何繪制變化率下一篇：DXperience WinForms12.2幫助文檔十：自定義字符格式