欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Web純前端“旭日圖”實(shí)現(xiàn)元素周期表

 更新時(shí)間:2017年03月10日 15:22:54   作者:啟明  
本文主要介紹了Web純前端“旭日圖”實(shí)現(xiàn)元素周期表的實(shí)例解析。具有很好的參考價(jià)值。下面跟著小編一起來看下吧

一、什么是旭日圖

旭日圖是在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 旭日圖表示的元素周期表

四、源碼下載

旭日圖簡單示例的源碼:

SunburstIntro.rar

旭日圖表示元素周期表的代碼:

PeriodicSunburst.rar

以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!

相關(guān)文章

  • 一文帶你搞懂JavaScript中的原型和原型鏈

    一文帶你搞懂JavaScript中的原型和原型鏈

    JavaScript是基于原型繼承的語言,每個對象都有一個原型(prototype),本文則是重點(diǎn)對prototype相關(guān)知識點(diǎn)做拆解和梳理,感興趣的可以了解下
    2023-08-08
  • IE下使用cloneNode注意事項(xiàng)分享

    IE下使用cloneNode注意事項(xiàng)分享

    在開發(fā)百度“地裂特效”時(shí),發(fā)現(xiàn)了一些匪夷所思的 bug,第一反應(yīng)是特效本身的代碼與頁面上原有的腳本發(fā)生了沖突,經(jīng)過調(diào)試發(fā)現(xiàn),問題出現(xiàn)在 cloneNode 的應(yīng)用上
    2012-11-11
  • ExtJs整合Echarts的示例代碼

    ExtJs整合Echarts的示例代碼

    本篇文章主要介紹了ExtJs整合Echarts的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-02
  • 百度Popup.js彈出框進(jìn)化版 拖拽小框架發(fā)布 兼容IE6/7/8,Firefox,Chrome

    百度Popup.js彈出框進(jìn)化版 拖拽小框架發(fā)布 兼容IE6/7/8,Firefox,Chrome

    百度空間的彈出窗口和拖拽效果(也就是popup.js),代碼精簡,效果也很好,我們可以在很多大型網(wǎng)站上見到這種效果,在我的項(xiàng)目中也使用了該js。
    2010-04-04
  • IE中鼠標(biāo)經(jīng)過option觸發(fā)mouseout的解決方法

    IE中鼠標(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-01
  • innerHTML innerText textContent使用區(qū)別示例詳解

    innerHTML innerText textContent使用區(qū)別示例詳解

    這篇文章主要為大家介紹了innerHTML innerText textContent使用區(qū)別示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11
  • javascript編寫實(shí)用的省市選擇器

    javascript編寫實(shí)用的省市選擇器

    這篇文章主要介紹了javascript編寫實(shí)用的省市選擇器的方法及示例分享,非常不錯,推薦給有相同需求的小伙伴們。
    2015-02-02
  • ScrollDown的基本操作示例

    ScrollDown的基本操作示例

    本文將涉及到scroll方法的應(yīng)用,判斷當(dāng)滾動條滾到底部時(shí)觸發(fā)scrollTop執(zhí)行函數(shù),具體代碼如下,感興趣的朋友可以了解下哈
    2013-06-06
  • javascript簡易緩動插件(源碼打包)

    javascript簡易緩動插件(源碼打包)

    最近,同事在做一個項(xiàng)目的時(shí)候,有個需求,需要一款動畫庫來支持
    2012-02-02
  • 得到元素真實(shí)的背景顏色的js代碼

    得到元素真實(shí)的背景顏色的js代碼

    這個函數(shù)來自Rico,Longbill及Dnew.cn修改。 說明: 傳入?yún)?shù)一個,為元素的id值或元素本身,返回為元素的真實(shí)背景色值(字符串)。背景值均為16進(jìn)制的值(原代碼是是IE里面返回的是16進(jìn)制的值,而Mozilla則是rgb值,Dnew.cn將其修改為均返回16進(jìn)制的值)。
    2007-12-12

最新評論