快捷導(dǎo)航

Web純前端“旭日?qǐng)D”實(shí)現(xiàn)元素周期表

更新時(shí)間：2017年03月10日 15:22:54 作者：啟明

本文主要介紹了Web純前端“旭日?qǐng)D”實(shí)現(xiàn)元素周期表的實(shí)例解析。具有很好的參考價(jià)值。下面跟著小編一起來看下吧

一、什么是旭日?qǐng)D

旭日?qǐng)D是在Excel 2016中新增的一種圖表。有些類似餅圖，餅圖的優(yōu)勢是可以顯示占比。但是餅圖只能顯示單級(jí)數(shù)據(jù)。旭日?qǐng)D用來表示多層級(jí)數(shù)據(jù)的占比。旭日?qǐng)D以一種分層方式顯示，非常適合用來顯示層級(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è)簡單的示例，初步感受一下旭日?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)的銷售來計(jì)算。

二、簡單示例

我們了解了旭日?qǐng)D之后，在有些場景中我們就想在自己的系統(tǒng)中使用旭日?qǐng)D。Wijmo中提供了JS控件可以讓我們在Web純前端使用旭日?qǐng)D。如果想在.Net平臺(tái)下使用旭日?qǐng)D可以了解ComponentOne中的FlexChart。通過下面一個(gè)簡單的示例，對(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來做它，對(duì)這點(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、定義一個(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：

和前邊的簡單示例相比，這里綁定的數(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é)果：