FushionChart一個酷炫的圖表插件

原創 sunny_lin5 2020-02-24 08:09

FushionChart是一個關於圖表的js插件。它能夠把很多簡單的圖表用很酷很炫的方式顯示在html中。它接受json,xml數據格式，我們只需要知道不同圖表不同的數據格式就能夠正確顯示圖表了。它操作起來非常簡單，下面我就來簡單介紹一下它是如何使用的。以下使用的所有數據都是靜態的json格式的數據。要實現動態效果自己加上ajax將數據傳過來就行了。 


1. 首先在官網上下載最新的FushionChart js庫，官網地址: http://www.fusioncharts.com/


2. 解壓下載下來的jar以後觀察其目錄結構

assets --> 存放資源的,我們用不到。

export-handlers --> 存放與asp和php的相關的文件,我用的是Java所以也用不到。

js --> 我們要用的所有的js全在這裏面了。

license --> 一個doc文檔,用不到。

index.html --> 一個教程頁面


因爲js目錄下的文件纔是我們用得到,所以接下來我就詳細說明一下它裏面各個文件的作用。

js目錄下文件說明
File Name Description
fusioncharts.js 這是FushionChart所有的基礎類庫，使用所有圖表都需要有此js的支持，這個js一定要引入
fusioncharts.charts.js 這是支持FusionCharts XT類型圖表的js，如果需要使用charts則需要將此js和fusioncharts.js 放置在同一目錄下
fusioncharts.widgets.js 這是支持FusionWidgets XT類型圖表的js，如果需要使用widgets則需要將此js和fusioncharts.js 放置在同一目錄下
fusioncharts.powercharts.js 這是支持PowerCharts XT類型圖表的js，如果需要使用powercharts則需要將此js和fusioncharts.js 放置在同一目錄下
fusioncharts.gantt.js 這是支持FusionWidgets XT下的Gantt chart類型圖表的js，則需使用要將此js和fusioncharts.js 放置在同一目錄下
fusioncharts.maps.js 這是支持map類型圖表的js，則需要將此js和fusioncharts.js 放置在同一目錄下相當於地圖庫的底層
maps/* 此目錄下的js都是對fusioncharts.maps.js的支持,屬於maps的definition文件，針對每張地圖的具體js
themes/* 主題js提供charts, gauges, maps的主題。如果要使用主題,這個目錄下的js也需要引入,但是只需要引入所需要的就行


下面就可以來看看如何實現一個簡單的3D柱狀圖

[html] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html charset=utf-8">  
  4. <title>My First Column 3D chart</title>  
  5. <script type="text/javascript" src="js/fusioncharts.js"></script><!-- fusioncharts基礎js類庫 -->  
  6. <script type="text/javascript" src="js/themes/fusioncharts.theme.fint.js"></script><!-- fusioncharts主題js -->  
  7. <script type="text/javascript">  
  8. FusionCharts.ready(function () {  
  9.     var stackedChart = new FusionCharts({  
  10.         "type": "column3d",     //顯示圖表的類型  
  11.         "renderAt": "chartContainer",   //renderAt爲存放chart的標籤id,一般放在div中  
  12.     "width": "400",         //chart的寬  
  13.     "height": "300",        //chart的高  
  14.     "dataFormat": "json",       //需要顯示成chart的數據的格式,還可以是xml  
  15.         "dataSource":  {  
  16.         "chart": {  
  17.             "caption": "Monthly revenue for last year", //一級標題  
  18.                 "subCaption": "Harry's SuperMart",      //二級標題  
  19.                 "xAxisName": "Month",               //x軸表示Month  
  20.                 "yAxisName": "Revenues (In USD)",       //Y軸表示總收入  
  21.                 "numberPrefix": "$",                //value前帶上$  
  22.                 "theme": "fint"                 //主題fint  
  23.         },  
  24.         "data": [  
  25.             {  
  26.                 "label": "Jan",  
  27.                     "value": "420000"  
  28.                 },  
  29.                 {  
  30.                     "label": "Feb",  
  31.                     "value": "810000"  
  32.                 },  
  33.                 {  
  34.                     "label": "Mar",  
  35.                     "value": "720000"  
  36.                 },  
  37.                 {  
  38.                     "label": "Apr",  
  39.                     "value": "550000"  
  40.                 },  
  41.                 {  
  42.                     "label": "May",  
  43.                     "value": "910000"  
  44.                 },  
  45.                 {  
  46.                     "label": "Jun",  
  47.                     "value": "510000"  
  48.             },  
  49.             {  
  50.                     "label": "Jul",  
  51.                     "value": "680000"  
  52.                 },  
  53.                 {  
  54.                     "label": "Aug",  
  55.                     "value": "620000"  
  56.                 },  
  57.                 {  
  58.                     "label": "Sep",  
  59.                     "value": "610000"  
  60.                 },  
  61.                 {  
  62.                     "label": "Oct",  
  63.                     "value": "490000"  
  64.                 },  
  65.                 {  
  66.                     "label": "Nov",  
  67.                     "value": "900000"  
  68.                 },  
  69.                 {  
  70.                     "label": "Dec",  
  71.                     "value": "730000"  
  72.                 }  
  73.         ]  
  74.     }  
  75.   
  76.    });  
  77.   
  78.     stackedChart.render();  
  79. });  
  80. </script>  
  81. </head>  
  82. <body>  
  83.   <div id="chartContainer">A Column 3D chart will load here! </div>  
  84. </body>  
  85. </html>  
下面是效果圖：

下面來解釋一下代碼:

        首先,FusionCharts.ready()相當於jQuery的$(document).ready()，在這個方法裏面,新建一個變量。上面的例子是stackedChart 這個變量指向一個

FusionChart的對象，這個對象裏面,面述了我們要顯示的圖表。

type：就是你所想要顯示的圖表類型的屬性。這個類型有很多種，後面我已經列出一些圖表類型。

dataSource：就是我們圖表中要顯示的數據，不同圖表類型，對數據也是有一些依賴。就是說要正確顯示相應的圖表，我們需要提供相對應格式的數據。

chart：用來表述這個圖表的外觀的。同一種類型的圖表可以有不同的顯示，例如顏色,數據顯示的方式

data：就是要顯示的數據啦

caption：圖表的一級標題

subCaption：圖表的二級標題

xAxisName：x軸表示的是什麼,這裏是Month

yAxisName：Y軸表示的是什麼,這裏是總收入

numberPrefix：value的數字的前綴,這裏是$

theme：圖表的主題fint

        這裏FusionChart已經爲我們提供了幾套主題：carbon,fint,ocean,zune。如果要使用這些主題,需要引入相應的js。如果需要修改部分樣式可以直接在chart

中重新定義，有能力的還可以自己去定製一個自己喜歡的主題。通過上面可以看出fushionchart使用起來很簡單。引入js，選擇好需要的圖表類型type，之後設置

寬和高,存放圖表標籤的id.然後設置相應的圖表信息，引入數據就ok了。

以下是部分圖表類型

Single Series Charts(簡單系列圖表)

Chart Type JavaScript Name 中文名
Column 2D column2d 2D柱狀圖
Column 3D column3d 3D柱狀圖
Line 2D line 2D線形圖
Area 2D area2d 2D區域圖
Bar 2D bar2d 2D條形圖
Bar 3D bar3d 3D條形圖
Pie 2D pie2d 2D餅圖
Pie 3D pie3d 3D餅圖
Doughnut 2D doughnut2d 2D圓環圖
Doughnut 3D doughnut3d 3D圓環圖
Pareto 2D pareto2d 2D排列圖
Pareto 3D pareto3d 3D排列圖


fushionchart有用的網址:

http://docs.fusioncharts.com/tutorial-setup-installation.html：這個是fushionchart使用手冊，裏面講解的非常詳細，同時有每一個系列表格的簡單構建說明。

http://docs.fusioncharts.com/FusionCharts.html#page-class--fusioncharts：fushionchart的api這個我就不多做介紹了。

http://www.fusioncharts.com/explore/charts/：裏面有每一種表格的圖片樣子，同一圖表還有不同的顯示風格，我們都可以點擊查看我們喜歡的表格樣式設置

和相應表格所需要的數據格式。

http://docs.fusioncharts.com/tutorial-setup-list-of-charts.html：所有funshionchart的type類型都可以在這裏找到。

以上四個網址就可以幫助我們完全瞭解fushionchart了。


fushionchart一些特殊功能(這些在上面的網址中都有提到，如果仔細看會看到)：支持圖表下載，可以以圖片或者pdf格式下載下來。圖表還有一些點擊事件，

可以放大縮小，部分顯示,二級圖表等。還可以製作任務表格。還有很多特殊的圖表例如溫度計啊，速度表等等，有你很多意想不到的圖表。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

asp.net+FusionCharts+jQuery(ajax)後臺請求數據生成圖表

關鍵：使用FusionCharts的setJSONData(data)或者setXMLData(data)方法。 前臺aspx部分代碼： [csharp] view plain copy <div id="Div7"

sunny_lin5 2020-07-02 10:10:14

FusionChartsFree調用json數據的簡單例子

需準備FusionChartsFree插件的FusionCharts.js文件和FCF_Column3D.swf兩個文件 官方鏈接地址 FusionCharts.js：http://www.fusioncharts.com/free/d

sunny_lin5 2020-07-02 10:10:13

asp.net+FusionCharts+jQuery(ajax)後臺請求數據生成圖表

關鍵：使用FusionCharts的setJSONData(data)或者setXMLData(data)方法。 前臺aspx部分代碼： [csharp] view plain copy <div id="Div7"

sunny_lin5 2020-07-02 10:10:14

FusionChartsFree調用json數據的簡單例子

需準備FusionChartsFree插件的FusionCharts.js文件和FCF_Column3D.swf兩個文件 官方鏈接地址 FusionCharts.js：http://www.fusioncharts.com/free/d

sunny_lin5 2020-07-02 10:10:13

fusioncharts出圖

昨天下午加今天上午一直在調程序 結果調到最後，發現所有的問題無外乎兩種 1、需要的文件沒有導入 2、中文亂碼問題   json裏所有的數據都是沒編碼的，所以如果要寫中文的話，需要在前面加上u   利用數據出圖代碼 html   <div

iteye_3128 2020-06-19 12:09:01

FushionChart一個酷炫的圖表插件

Edifiergl 2018-09-01 05:41:28