Web純前端“旭日?qǐng)D”實(shí)現(xiàn)元素周期表
一、什么是旭日?qǐng)D
旭日?qǐng)D是在Excel 2016中新增的一種圖表。有些類似餅圖，餅圖的優(yōu)勢(shì)是可以顯示占比。但是餅圖只能顯示單級(jí)數(shù)據(jù)。旭日?qǐng)D用來(lái)表示多層級(jí)數(shù)據(jù)的占比。旭日?qǐng)D以一種分層方式顯示，非常適合用來(lái)顯示層級(jí)數(shù)據(jù)。層次結(jié)構(gòu)中每個(gè)級(jí)別的比例通過1個(gè)圓環(huán)表示，離原點(diǎn)越近代表圓環(huán)級(jí)別越高，最內(nèi)層的圓表示頂級(jí)結(jié)構(gòu)，然后一層一層去看數(shù)據(jù)的占比情況。
我們通過一個(gè)簡(jiǎn)單的示例，初步感受一下旭日?qǐng)D的魅力。
|
季度 |
月份 |
周 |
銷量 |
|
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 用旭日?qǐng)D表示的銷量
通過表1我們可以看到它是一個(gè)層級(jí)數(shù)據(jù)，第1級(jí)是季度，第2級(jí)是月份，第3級(jí)是周。圖1是根據(jù)表1在Excel中繪制的旭日?qǐng)D。內(nèi)層顯示第1級(jí)季度，其外層的圓環(huán)顯示第2級(jí)月份，最外層圓環(huán)顯示第3級(jí)周。顯示的每個(gè)占比是根據(jù)其對(duì)應(yīng)的銷售來(lái)計(jì)算。
二、簡(jiǎn)單示例
我們了解了旭日?qǐng)D之后，在有些場(chǎng)景中我們就想在自己的系統(tǒng)中使用旭日?qǐng)D。Wijmo中提供了JS控件可以讓我們?cè)赪eb純前端使用旭日?qǐng)D。如果想在.Net平臺(tái)下使用旭日?qǐng)D可以了解ComponentOne中的FlexChart。通過下面一個(gè)簡(jiǎn)單的示例，對(duì)如何使用旭日?qǐng)D有一個(gè)初步的了解。
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、定義一個(gè)DIV
這個(gè)DIV用戶顯示旭日?qǐng)D。
<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)建了一個(gè)app類，其中包含一個(gè)getData方法，用于產(chǎn)生一個(gè)多級(jí)數(shù)據(jù)。它的級(jí)別分別是年、季度、月份。
sunburst.js：
(function(wijmo, app) {
'use strict';
// 創(chuàng)建控件
var chart = new wijmo.chart.hierarchical.Sunburst('#introChart');
// 初始化旭日?qǐng)D
chart.beginUpdate();
// 旭日?qǐng)D包含的值得屬性名
chart.binding = 'value';
// 設(shè)置層級(jí)數(shù)據(jù)中子項(xiàng)目的名稱，用于在旭日?qǐng)D中生成子項(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)建一個(gè)Sunburst對(duì)象，設(shè)置數(shù)據(jù)源以及相關(guān)屬性。數(shù)據(jù)源通過app.getData()提供。
下面是程序運(yùn)行的結(jié)果。
圖2 運(yùn)行結(jié)果
三、用“旭日?qǐng)D”實(shí)現(xiàn)元素周期表
有了以上的知識(shí)儲(chǔ)備之后，我們就可以做復(fù)雜一點(diǎn)的實(shí)現(xiàn)。下面我們用“旭日?qǐng)D”實(shí)現(xiàn)元素周期表。我們上高中的時(shí)候，都應(yīng)該學(xué)習(xí)過元素周期表，它是類似如下的一張表。這張表更多了展示了元素的信息，但是沒有很好的展示元素歸類的信息。我們現(xiàn)在用旭日?qǐng)D來(lái)做它，對(duì)這點(diǎn)進(jìn)行改善。
圖3 元素周期表
HTML文件：
和簡(jiǎn)單示例中的類似，需要引入Wijmo相關(guān)的樣式和js文件。
1、引入自定義的js文件
<script src="scripts/DataLoader.js"></script> <script src="scripts/app.js"></script>
2、定義一個(gè)DIV
<div id="periodic-sunburst" class="periodic-sunburst"></div>
DataLoader.js：
創(chuàng)建了一個(gè)DataLoader類，其中提供兩個(gè)方法。readFile方法讀取json文件獲得數(shù)據(jù)。isInclude 方法判斷數(shù)組中是否存在指定的元素。generateCollectionView方法中對(duì)數(shù)據(jù)進(jìn)行加工處理。
var DataLoader = {};
// 一級(jí)分類
var METALS_TITLE = "金屬";
var NON_METALS_TITLE = "非金屬";
var OTHERS_TITLE = "過渡元素";
// 二級(jí)分類
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)行第一級(jí)分組
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)行第二級(jí)分組
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對(duì)數(shù)據(jù)進(jìn)行2級(jí)分組。第1級(jí)是金屬、非金屬、過渡元素。第2級(jí)分別是他們的子級(jí)別。第3級(jí)是元素，每個(gè)元素的Value都是1，表示元素的占比相同。
app.js：
和前邊的簡(jiǎn)單示例相比，這里綁定的數(shù)據(jù)源是CollectionView.Groups，它是CollectionView中的第一級(jí)分組。
var mySunburst;
function setSunburst(elementCollectionView) {
// 創(chuàng)建旭日?qǐng)D控件
mySunburst = new wijmo.chart.hierarchical.Sunburst('#periodic-sunburst');
mySunburst.beginUpdate();
// 設(shè)置旭日?qǐng)D的圖例不顯示
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 旭日?qǐng)D表示的元素周期表
四、源碼下載
旭日?qǐng)D簡(jiǎn)單示例的源碼：
旭日?qǐng)D表示元素周期表的代碼：
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了新手快速上手webpack4打包工具的使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-01-01
用eval方法，把傳進(jìn)來(lái)的這個(gè)方法名所代表的方法當(dāng)作一個(gè)對(duì)象來(lái)賦值給method1的func屬性,需要的朋友可以參考下2014-04-04
JavaScript?裝飾器是一種特殊的功能，允許在不修改源代碼的情況下動(dòng)態(tài)修改類和函數(shù)的行為，本文將介紹五個(gè)讓你眼前一亮的裝飾器技巧，包括裝飾函數(shù)參數(shù)、裝飾類屬性、裝飾函數(shù)返回值和裝飾函數(shù)調(diào)用,需要的朋友可以參考下2023-06-06
一個(gè)頁(yè)面元素appendchild追加到另一個(gè)頁(yè)面元素的問題
一般都是自己創(chuàng)建元素然后append到頁(yè)面的但是如果是頁(yè)面本身有的元素append到另一個(gè)頁(yè)面元素呢,很多的新手朋友對(duì)此問題比較好奇，本人也是如此啊，好了不多說(shuō)，切入主題，感興趣的朋友可以了解下哦2013-01-01
uniapp?H5遮罩層、彈窗以及蒙層滾動(dòng)穿透/滑動(dòng)穿透解決辦法
最近用uin-app做項(xiàng)目遇到了不少問題,下面這篇文章主要給大家介紹了關(guān)于uniapp?H5遮罩層、彈窗以及蒙層滾動(dòng)穿透/滑動(dòng)穿透的解決辦法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
js有趣的非空判斷函數(shù) + ?? 實(shí)現(xiàn)
本文介紹了JS中空值合并操作符??的用法,包括如何使用它來(lái)判斷數(shù)據(jù)是否為“合法數(shù)據(jù)”,即非空字符串、非undefined和非null,下面就一起來(lái)了解一下,感興趣的可以了解一下2024-09-09
JS實(shí)現(xiàn)使用POST方式發(fā)送請(qǐng)求
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)使用POST方式發(fā)送請(qǐng)求，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
淺談JS運(yùn)算符&&和|| 及其優(yōu)先級(jí)
下面小編就為大家?guī)?lái)一篇淺談JS運(yùn)算符&&和|| 及其優(yōu)先級(jí)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-08-08
JavaScript原型對(duì)象、構(gòu)造函數(shù)和實(shí)例對(duì)象功能與用法詳解
這篇文章主要介紹了JavaScript原型對(duì)象、構(gòu)造函數(shù)和實(shí)例對(duì)象功能與用法,結(jié)合實(shí)例形式分析了javascript面向?qū)ο笙嚓P(guān)原型對(duì)象、構(gòu)造函數(shù)及實(shí)例對(duì)象的概念、功能與相關(guān)使用技巧,需要的朋友可以參考下2018-08-08
JavaScript實(shí)現(xiàn)一個(gè)帶AI的井字棋游戲源碼
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)一個(gè)帶AI的井字棋游戲源碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05