Web纯前端“旭日图”实现元素周期表


Posted in Javascript onMarch 10, 2017

一、什么是旭日图

旭日图是在Excel 2016中新增的一种图表。有些类似饼图,饼图的优势是可以显示占比。但是饼图只能显示单级数据。旭日图用来表示多层级数据的占比。旭日图以一种分层方式显示,非常适合用来显示层级数据。层次结构中每个级别的比例通过1个圆环表示,离原点越近代表圆环级别越高,最内层的圆表示顶级结构,然后一层一层去看数据的占比情况。

我们通过一个简单的示例,初步感受一下旭日图的魅力。

季度 月份 销量
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 某产品的销量统计

Web纯前端“旭日图”实现元素周期表 

图1 用旭日图表示的销量

通过表1我们可以看到它是一个层级数据,第1级是季度,第2级是月份,第3级是周。图1是根据表1在Excel中绘制的旭日图。内层显示第1级季度,其外层的圆环显示第2级月份,最外层圆环显示第3级周。显示的每个占比是根据其对应的销售来计算。

二、简单示例

我们了解了旭日图之后,在有些场景中我们就想在自己的系统中使用旭日图。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:

// 产生数据
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()提供。

下面是程序运行的结果。

 Web纯前端“旭日图”实现元素周期表

图2 运行结果

三、用“旭日图”实现元素周期表

有了以上的知识储备之后,我们就可以做复杂一点的实现。下面我们用“旭日图”实现元素周期表。我们上高中的时候,都应该学习过元素周期表,它是类似如下的一张表。这张表更多了展示了元素的信息,但是没有很好的展示元素归类的信息。我们现在用旭日图来做它,对这点进行改善。

Web纯前端“旭日图”实现元素周期表

图3 元素周期表

HTML文件:

和简单示例中的类似,需要引入Wijmo相关的样式和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:

创建了一个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);

运行结果:

Web纯前端“旭日图”实现元素周期表

图4 旭日图表示的元素周期表

四、源码下载

旭日图简单示例的源码:

旭日图表示元素周期表的代码:

PeriodicSunburst.rar

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js实现键盘Enter键提交表单的方法
May 27 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
angular实现商品筛选功能
Feb 01 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
浅谈JavaScript中this的指向更改
Jul 28 Javascript
vue实现登录功能
Dec 31 Vue.js
微信小程序 MD5的方法详解及实例代码
Mar 10 #Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 #Javascript
AngularJS之页面跳转Route实例代码
Mar 10 #Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 #Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 #Javascript
Vue.js之slot深度复制详解
Mar 10 #Javascript
JS实现的自动打字效果示例
Mar 10 #Javascript
You might like
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
Js 刷新框架页的代码
2010/04/13 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
python django集成cas验证系统
2014/07/14 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
对Python中plt的画图函数详解
2018/11/07 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
党员岗位承诺书
2014/03/25 职场文书
岗位安全生产责任书
2014/07/28 职场文书
求职信格式范文
2015/03/19 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript
讲解Python实例练习逆序输出字符串
2022/05/06 Python
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript