Web純前端“放射環狀圖”實現元素周期表

標籤：前端   wijmo   放射環狀圖   

一、什麼是放射環狀圖

放射環狀圖是在Excel 2016中新增的一種圖表。有些類似餅圖，餅圖的優勢是可以顯示佔比。但是餅圖只能顯示單級資料。放射環狀圖用來表示多層級資料的佔比。放射環狀圖以一種分層方式顯示，非常適合用來顯示層級資料。階層中每個層級的比例通過1個圓環表示，離原點越近代表圓環層級越高，最內層的圓表示頂級結構，然後一層一層去看資料的佔比情況。

我們通過一個簡單的樣本，初步感受一下放射環狀圖的魅力。

 

季度	月份	周	銷量
Q1	1月份		29
	2月份	第一周	63
		第二周	54
		第三周	91
		第四周	78
	3月份		49
Q2	4月份		66
	5月份		110
	6月份		42
Q3	7月份		19
	8月份		73
	9月份		109
Q4	10月份		32
	11月份		112
	12月份		99

表1 某產品的銷量統計

650) this.width=650;" src="http://images2015.cnblogs.com/blog/10730/201703/10730-20170310092656297-279953349.png" />

圖1 用放射環狀圖表示的銷量

 

通過表1我們可以看到它是一個層級資料，第1級是季度，第2級是月份，第3級是周。圖1是根據表1在Excel中繪製的放射環狀圖。內層顯示第1級季度，其外層的圓環顯示第2級月份，最外層圓環顯示第3級周。顯示的每個佔比是根據其對應的銷售來計算。

 

二、簡單樣本

我們瞭解了放射環狀圖之後，在有些情境中我們就想在自己的系統中使用放射環狀圖。Wijmo中提供了JS控制項可以讓我們在Web純前端使用放射環狀圖。如果想在.Net平台下使用放射環狀圖可以瞭解ComponentOne中的FlexChart。通過下面一個簡單的樣本，對如何使用放射環狀圖有一個初步的瞭解。

 

HTML檔案：

1、引入Wijmo的css和js

    <!-- Styles -->    <link href="styles/vendor/wijmo.min.css" rel="stylesheet" />    <link href="styles/app.css" rel="stylesheet" />    <!-- Wijmo -->    <script src="scripts/vendor/wijmo.min.js" type="text/javascript"></script>    <script src="scripts/vendor/wijmo.chart.min.js" type="text/javascript"></script>    <script src="scripts/vendor/wijmo.chart.hierarchical.min.js" type="text/javascript"> </script>

2、定義一個DIV

這個DIV使用者顯示放射環狀圖。

<div id="introChart"></div>

3、引入自訂的js檔案

<script src="scripts/app.js"></script><script src="scripts/sunburst.js"></script>

app.js：

// 產生資料var app = {    getData: function () {        var data = [],            months = [[‘Jan‘, ‘Feb‘, ‘Mar‘], [‘Apr‘, ‘May‘, ‘June‘], [‘Jul‘, ‘Aug‘, ‘Sep‘], [‘Oct‘, ‘Nov‘, ‘Dec‘]],            years = [2014, 2015, 2016];        years.forEach(function (y, i) {            months.forEach(function (q, idx) {                var quar = ‘Q‘ + (idx + 1);                q.forEach(function (m) {                    data.push({                        year: y.toString(),                        quarter: quar,                        month: m,                        value: Math.round(Math.random() * 100)                    });                });            });        });        return data;    },};

建立了一個app類，其中包含一個getData方法，用於產生一個多級資料。它的層級分別是年、季度、月份。

 

sunburst.js：

(function(wijmo, app) {    ‘use strict‘;    // 建立控制項    var chart = new wijmo.chart.hierarchical.Sunburst(‘#introChart‘);    // 初始化放射環狀圖    chart.beginUpdate();    // 放射環狀圖包含的值得屬性名稱    chart.binding = ‘value‘;    // 設定層級資料中子項目的名稱，用於在放射環狀圖中產生子項    chart.bindingName = [‘year‘, ‘quarter‘, ‘month‘];    // 設定資料來源    chart.itemsSource = app.getData();    // 設定資料顯示的位置    chart.dataLabel.position = wijmo.chart.PieLabelPosition.Center;    // 設定資料顯示的內容    chart.dataLabel.content = ‘{name}‘;    // 設定選擇模式    chart.selectionMode = ‘Point‘;    chart.endUpdate();})(wijmo, app);

根據Div的ID建立一個Sunburst對象，設定資料來源以及相關屬性。資料來源通過app.getData()提供。

下面是程式啟動並執行結果。

650) this.width=650;" style="margin-right:auto;margin-left:auto;" src="http://images2015.cnblogs.com/blog/10730/201703/10730-20170310090533781-1036128425.png" />

圖2 運行結果

三、用“放射環狀圖”實現元素周期表

有了以上的知識儲備之後，我們就可以做複雜一點的實現。下面我們用“放射環狀圖”實現元素周期表。我們上高中的時候，都應該學習過元素周期表，它是類似如下的一張表。這張表更多了展示了元素的資訊，但是沒有很好的展示元素歸類的資訊。我們現在用放射環狀圖來做它，對這點進行改善。

650) this.width=650;" width="636" height="531" style="margin-right:auto;margin-left:auto;" src="http://images2015.cnblogs.com/blog/10730/201703/10730-20170310091036219-993330047.jpg" />

圖3 元素周期表

HTML檔案：

和簡單樣本中的類似，需要引入Wijmo相關的樣式和js檔案。

 

1、引入自訂的js檔案

<script src="scripts/DataLoader.js"></script><script src="scripts/app.js"></script>

2、定義一個DIV

<div id="periodic-sunburst" class="periodic-sunburst"></div>

DataLoader.js：

建立了一個DataLoader類，其中提供兩個方法。readFile方法讀取json檔案獲得資料。isInclude 方法判斷數組中是否存在指定的元素。generateCollectionView方法中對資料進行加工處理。

var DataLoader = {};// 一級分類var METALS_TITLE = "金屬";var NON_METALS_TITLE = "非金屬";var OTHERS_TITLE = "過渡元素";// 二級分類var METAL_TYPES = ‘堿金屬|堿土金屬|過渡金屬|鑭系元素|錒系元素|其他金屬‘.split(‘|‘);var NON_METAL_TYPES = ‘惰性氣體|鹵素|非金屬‘.split(‘|‘);var OTHER_TYPES = ‘准金屬|超錒系‘.split(‘|‘);DataLoader = {    readFile: function (filePath, callback) {        var reqClient = new XMLHttpRequest();        reqClient.onload = callback;        reqClient.open("get", filePath, true);        reqClient.send();    },    isInclude: function (arr, data) {        if (arr.toString().indexOf(data) > -1)            return true;        else            return false;    },    generateCollectionView: function (callback) {        DataLoader.readFile(‘data/elements.json‘, function (e) {            // 擷取資料            var rawElementData = JSON.parse(this.responseText);            var elementData = rawElementData[‘periodic-table-elements‘].map(function (item) {                item.properties.value = 1;                return item.properties;            });            var data = new wijmo.collections.CollectionView(elementData);            //  利用wijmo.collections.PropertyGroupDescription 進行第一級分組            data.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription(‘type‘, function (item, prop) {                if (DataLoader.isInclude(METAL_TYPES, item[prop])) {                    return METALS_TITLE;                } else if (DataLoader.isInclude(NON_METAL_TYPES, item[prop])) {                    return NON_METALS_TITLE;                } else {                    return OTHERS_TITLE;                }            }));            // 進行第二級分組            data.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription(‘type‘, function (item, prop) {                return item[prop];            }));            callback(data);        });    }};

generateCollectionView方法中調用readFile獲得json資料，之後利用Wijmo中提供的CollectionView對資料進行2級分組。第1級是金屬、非金屬、過渡元素。第2級分別是他們的子層級。第3級是元素，每個元素的Value都是1，表示元素的佔比相同。

 

app.js：

和前邊的簡單樣本相比，這裡繫結資料源是CollectionView.Groups，它是CollectionView中的第一級分組。

var mySunburst;function setSunburst(elementCollectionView) {       // 建立放射環狀圖控制項    mySunburst = new wijmo.chart.hierarchical.Sunburst(‘#periodic-sunburst‘);     mySunburst.beginUpdate();    // 設定放射環狀圖的圖例不顯示    mySunburst.legend.position = ‘None‘;    // 設定內圓半徑    mySunburst.innerRadius = 0.1;    // 設定選擇模式    mySunburst.selectionMode = ‘Point‘;    // 設定資料顯示的位置    mySunburst.dataLabel.position = ‘Center‘;    // 設定資料顯示的內容    mySunburst.dataLabel.content = ‘{name}‘;     // 進行資料繫結    mySunburst.itemsSource = elementCollectionView.groups;    // 包含圖表值的屬性名稱    mySunburst.binding = ‘value‘;    // 資料項目名稱    mySunburst.bindingName = [‘name‘, ‘name‘, ‘symbol‘];     // 在分層資料中產生子項的屬性的名稱。    mySunburst.childItemsPath = [‘groups‘, ‘items‘];     mySunburst.endUpdate();};DataLoader.generateCollectionView(setSunburst);

運行結果：

650) this.width=650;" style="margin-right:auto;margin-left:auto;" src="http://images2015.cnblogs.com/blog/10730/201703/10730-20170310091535703-601672232.png" />

圖4 放射環狀圖表示的元素周期表

四、源碼下載

　　放射環狀圖簡單樣本的源碼：

　　　　SunburstIntro.zip

 

　　放射環狀圖表示元素周期表的代碼：

　　　　PeriodicSunburst.zip

Web純前端“放射環狀圖”實現元素周期表