Web純前端“旭日圖”實(shí)現(xiàn)元素周期表
一、什么是旭日圖
旭日圖是在Excel 2016中新增的一種圖表。有些類似餅圖,餅圖的優(yōu)勢是可以顯示占比。但是餅圖只能顯示單級數(shù)據(jù)。旭日圖用來表示多層級數(shù)據(jù)的占比。旭日圖以一種分層方式顯示,非常適合用來顯示層級數(shù)據(jù)。層次結(jié)構(gòu)中每個級別的比例通過1個圓環(huán)表示,離原點(diǎn)越近代表圓環(huán)級別越高,最內(nèi)層的圓表示頂級結(jié)構(gòu),然后一層一層去看數(shù)據(jù)的占比情況。
我們通過一個簡單的示例,初步感受一下旭日圖的魅力。
季度 |
月份 |
周 |
銷量 |
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 某產(chǎn)品的銷量統(tǒng)計(jì)
圖1 用旭日圖表示的銷量
通過表1我們可以看到它是一個層級數(shù)據(jù),第1級是季度,第2級是月份,第3級是周。圖1是根據(jù)表1在Excel中繪制的旭日圖。內(nèi)層顯示第1級季度,其外層的圓環(huán)顯示第2級月份,最外層圓環(huán)顯示第3級周。顯示的每個占比是根據(jù)其對應(yīng)的銷售來計(jì)算。
二、簡單示例
我們了解了旭日圖之后,在有些場景中我們就想在自己的系統(tǒng)中使用旭日圖。Wijmo中提供了JS控件可以讓我們在Web純前端使用旭日圖。如果想在.Net平臺下使用旭日圖可以了解ComponentOne中的FlexChart。通過下面一個簡單的示例,對如何使用旭日圖有一個初步的了解。
HTML文件:
1、引入Wijmo的css和js
<!-- Styles --> <link href="styles/vendor/wijmo.min.css" rel="external nofollow" rel="stylesheet" /> <link href="styles/app.css" rel="external nofollow" 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:
// 產(chǎn)生數(shù)據(jù) 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; }, };
創(chuàng)建了一個app類,其中包含一個getData方法,用于產(chǎn)生一個多級數(shù)據(jù)。它的級別分別是年、季度、月份。
sunburst.js:
(function(wijmo, app) { 'use strict'; // 創(chuàng)建控件 var chart = new wijmo.chart.hierarchical.Sunburst('#introChart'); // 初始化旭日圖 chart.beginUpdate(); // 旭日圖包含的值得屬性名 chart.binding = 'value'; // 設(shè)置層級數(shù)據(jù)中子項(xiàng)目的名稱,用于在旭日圖中生成子項(xiàng) chart.bindingName = ['year', 'quarter', 'month']; // 設(shè)置數(shù)據(jù)源 chart.itemsSource = app.getData(); // 設(shè)置數(shù)據(jù)顯示的位置 chart.dataLabel.position = wijmo.chart.PieLabelPosition.Center; // 設(shè)置數(shù)據(jù)顯示的內(nèi)容 chart.dataLabel.content = '{name}'; // 設(shè)置選擇模式 chart.selectionMode = 'Point'; chart.endUpdate(); })(wijmo, app);
根據(jù)Div的ID創(chuàng)建一個Sunburst對象,設(shè)置數(shù)據(jù)源以及相關(guān)屬性。數(shù)據(jù)源通過app.getData()提供。
下面是程序運(yùn)行的結(jié)果。
圖2 運(yùn)行結(jié)果
三、用“旭日圖”實(shí)現(xiàn)元素周期表
有了以上的知識儲備之后,我們就可以做復(fù)雜一點(diǎn)的實(shí)現(xiàn)。下面我們用“旭日圖”實(shí)現(xiàn)元素周期表。我們上高中的時(shí)候,都應(yīng)該學(xué)習(xí)過元素周期表,它是類似如下的一張表。這張表更多了展示了元素的信息,但是沒有很好的展示元素歸類的信息。我們現(xiàn)在用旭日圖來做它,對這點(diǎn)進(jìn)行改善。
圖3 元素周期表
HTML文件:
和簡單示例中的類似,需要引入Wijmo相關(guān)的樣式和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:
創(chuàng)建了一個DataLoader類,其中提供兩個方法。readFile方法讀取json文件獲得數(shù)據(jù)。isInclude 方法判斷數(shù)組中是否存在指定的元素。generateCollectionView方法中對數(shù)據(jù)進(jìn)行加工處理。
var DataLoader = {}; // 一級分類 var METALS_TITLE = "金屬"; var NON_METALS_TITLE = "非金屬"; var OTHERS_TITLE = "過渡元素"; // 二級分類 var METAL_TYPES = '堿金屬|(zhì)堿土金屬|(zhì)過渡金屬|(zhì)鑭系元素|錒系元素|其他金屬'.split('|'); var NON_METAL_TYPES = '惰性氣體|鹵素|非金屬'.split('|'); var OTHER_TYPES = '準(zhǔn)金屬|(zhì)超錒系'.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) { // 獲取數(shù)據(jù) 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 進(jìn)行第一級分組 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; } })); // 進(jìn)行第二級分組 data.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('type', function (item, prop) { return item[prop]; })); callback(data); }); } };
generateCollectionView方法中調(diào)用readFile獲得json數(shù)據(jù),之后利用Wijmo中提供的CollectionView對數(shù)據(jù)進(jìn)行2級分組。第1級是金屬、非金屬、過渡元素。第2級分別是他們的子級別。第3級是元素,每個元素的Value都是1,表示元素的占比相同。
app.js:
和前邊的簡單示例相比,這里綁定的數(shù)據(jù)源是CollectionView.Groups,它是CollectionView中的第一級分組。
var mySunburst; function setSunburst(elementCollectionView) { // 創(chuàng)建旭日圖控件 mySunburst = new wijmo.chart.hierarchical.Sunburst('#periodic-sunburst'); mySunburst.beginUpdate(); // 設(shè)置旭日圖的圖例不顯示 mySunburst.legend.position = 'None'; // 設(shè)置內(nèi)圓半徑 mySunburst.innerRadius = 0.1; // 設(shè)置選擇模式 mySunburst.selectionMode = 'Point'; // 設(shè)置數(shù)據(jù)顯示的位置 mySunburst.dataLabel.position = 'Center'; // 設(shè)置數(shù)據(jù)顯示的內(nèi)容 mySunburst.dataLabel.content = '{name}'; // 進(jìn)行數(shù)據(jù)綁定 mySunburst.itemsSource = elementCollectionView.groups; // 包含圖表值的屬性名 mySunburst.binding = 'value'; // 數(shù)據(jù)項(xiàng)名稱 mySunburst.bindingName = ['name', 'name', 'symbol']; // 在分層數(shù)據(jù)中生成子項(xiàng)的屬性的名稱。 mySunburst.childItemsPath = ['groups', 'items']; mySunburst.endUpdate(); }; DataLoader.generateCollectionView(setSunburst);
運(yùn)行結(jié)果:
圖4 旭日圖表示的元素周期表
四、源碼下載
旭日圖簡單示例的源碼:
旭日圖表示元素周期表的代碼:
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
百度Popup.js彈出框進(jìn)化版 拖拽小框架發(fā)布 兼容IE6/7/8,Firefox,Chrome
百度空間的彈出窗口和拖拽效果(也就是popup.js),代碼精簡,效果也很好,我們可以在很多大型網(wǎng)站上見到這種效果,在我的項(xiàng)目中也使用了該js。2010-04-04IE中鼠標(biāo)經(jīng)過option觸發(fā)mouseout的解決方法
這篇文章主要介紹了IE中鼠標(biāo)經(jīng)過option觸發(fā)mouseout的解決方法,分析了IE中鼠標(biāo)移到option時(shí)window.event.toElement返回值為null的原因及解決方法,需要的朋友可以參考下2015-01-01innerHTML innerText textContent使用區(qū)別示例詳解
這篇文章主要為大家介紹了innerHTML innerText textContent使用區(qū)別示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11