Web前端實作元素週期表

一、什麼是旭日圖

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

我們透過一個簡單的範例，初步感受一下旭日圖的魅力。

週銷售## Q11月份#63第二週54#第三週　49#　665月份6月份42　19

季度	月份
			##29
		2月份	第一週##​​
			91
#第四周	78		3月份
	#49
		Q2	4月份
		66
		#110
		#42
		Q3	7月份

########## #########8月份############　#############73##################################73############## ####9月份############　#############109##################Q4 ############10月份############　############32########### #######11月份############　#############112################ ##12月份############　#############99####################################################################################

表1 某產品的銷售統計

圖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、定義一個p

這個p使用者顯示旭日圖。

<p id="introChart"></p>

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);

根據p的ID建立一個Sunburst

物件，設定資料來源以及相關屬性。資料來源透過app.getData()提供。

下面是程式運行的結果。

圖2 運行結果

三、用「旭日圖」實作元素週期表

有了以上的知識儲備之後，我們就可以做複雜一點的實現。下面我們用「旭日圖」實作元素週期表。我們上高中的時候，都應該學習過元素週期表，它是類似如下的表。這張表更多了展示了元素的信息，但是沒有很好的展示元素歸類的信息。我們現在用旭日圖來做它，並對這一點進行改善。

圖3 元素週期表

#HTML檔案：

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

 

1、引入自訂的js檔案

#

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

2、定義一個p

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

 

DataLoader.js：

建立了一個DataLoader類，其中提供兩個方法。 read

File方法讀取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);

運行結果：

圖4 旭日圖表示的元素週期表

以上是Web前端實作元素週期表的詳細內容。更多資訊請關注PHP中文網其他相關文章！