一、什么是旭日图
旭日图是在 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 中的。通过下面一个简单的示例,对如何使用旭日图有一个初步的了解。
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 旭日图表示的元素周期表
四、源码下载
旭日图简单示例的源码:
旭日图表示元素周期表的代码:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
来源: http://www.jb51.net/article/108093.htm