Web純前端「旭日圖」實現元素週期表

時間 2019-11-06

原文原文鏈接

1、什麼是旭日圖javascript

旭日圖是在Excel 2016中新增的一種圖表。有些相似餅圖，餅圖的優點是能夠顯示佔比。可是餅圖只能顯示單級數據。旭日圖用來表示多層級數據的佔比。旭日圖以一種分層方式顯示，很是適合用來顯示層級數據。層次結構中每一個級別的比例經過1個圓環表示，離原點越近表明圓環級別越高，最內層的圓表示頂級結構，而後一層一層去看數據的佔比狀況。css

咱們經過一個簡單的示例，初步感覺一下旭日圖的魅力。前端

季度java	月份json	周數組	銷量app
Q1dom	1月份學習		29this
	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 某產品的銷量統計

圖1 用旭日圖表示的銷量

經過表1咱們能夠看到它是一個層級數據，第1級是季度，第2級是月份，第3級是周。圖1是根據表1在Excel中繪製的旭日圖。內層顯示第1級季度，其外層的圓環顯示第2級月份，最外層圓環顯示第3級周。顯示的每一個佔比是根據其對應的銷售來計算。

2、簡單示例

咱們瞭解了旭日圖以後，在有些場景中咱們就想在本身的系統中使用旭日圖。Wijmo中提供了JS控件可讓咱們在Web純前端使用旭日圖。若是想在.Net平臺下使用旭日圖能夠了解FlexChart。經過下面一個簡單的示例，對如何使用旭日圖有一個初步的瞭解。

HTML文件：

一、引入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>

二、定義一個DIV

這個DIV用戶顯示旭日圖。

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

三、引入自定義的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()提供。

下面是程序運行的結果。

圖2 運行結果

3、用「旭日圖」實現元素週期表

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

圖3 元素週期表

HTML文件：

和簡單示例中的相似，須要引入Wijmo相關的樣式和js文件。

一、引入自定義的js文件

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

二、定義一個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);