Web纯前端“旭日图”实现元素周期表
一、什么是旭日图
旭日图是在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 某产品的销量统计
图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()提供。
下面是程序运行的结果。
图2 运行结果
三、用“旭日图”实现元素周期表
有了以上的知识储备之后，我们就可以做复杂一点的实现。下面我们用“旭日图”实现元素周期表。我们上高中的时候，都应该学习过元素周期表，它是类似如下的一张表。这张表更多了展示了元素的信息，但是没有很好的展示元素归类的信息。我们现在用旭日图来做它，对这点进行改善。
图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);
运行结果：
图4 旭日图表示的元素周期表
四、源码下载
旭日图简单示例的源码：
旭日图表示元素周期表的代码：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！