关键词：
什么是旭日图？
旭日图（Sunburst Chart）是一种现代饼图，它超越传统的饼图和环图，能表达清晰的层级和归属关系，以父子层次结构来显示数据构成情况。旭日图中，离远点越近表示级别越高，相邻两层中，是内层包含外层的关系。
在实际项目中使用旭日图，可以更细分溯源分析数据，真正了解数据的具体构成。而且，旭日图不仅数据直观，而且图表用起来特别炫酷，分分钟拉高数据汇报的颜值！很多数据场景都适合用旭日图，比如，在销售汇总报告中，方便看到每个店铺的销售业绩分布（如下图）:
做旭日图的三种方法
1. 用Excel（2016最新版才有旭日图功能）
第一步，创建数据
第二步，点击插入选项，选择“图表”右下方的箭头
第三步，在弹出的对话框中选择“所有图表”，然后选择旭日图
第四步，点击确定，旭日图就创建完成了。所有的数据以及层级关系都一目了然了。
2. 用Spread Studio表格控件
Spread Studio表格控件是一个功能和Excel类似的表格控件，用于在应用系统中实现表格数据录入和编辑等交互功能，并且提供灵活的定制能力和丰富的数据可视化效果。
在Spread Studio V10 版本中， Windows Forms 和 ASP.NET 平台都新增了旭日图，实现方法也很简单，用Spread设计器，和在Excel中一样，只需要选择数据源，插入旭日图即可。
第一步，创建数据
第二步，选择旭日图样式
第三步，创建旭日图，即可
3. 用Wijmo 前端控件集
Wijmo是新一代JavaScript控件集，具有快如闪电，触控优先的特点，能为企业应用提供更加灵活的操作体验，是全球率先支持Angular 的控件集。
我们尝试用Wijmo 做一张复杂的元素周期表。传统的元素周期表展示了元素的信息，但是没有很好的展示元素归类的信息。我们现在用旭日图来做它，对这点进行改善。
传统的元素周期表
用Wijmo 旭日图样式做出来的元素周期表
仅需3步：
第一步，引入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);以上就是用旭日图展示数据的三种方法，供大家参考。
本文出自 “11951243” 博客，谢绝转载！
基于echarts4.0实现旭日图
昨天Echarts4.0正式发布,随着4.0而来的是一系列的更新,挑几个主要的简单说明:1.展示方面通过增量渲染技术（4.0+）ECharts能够展现千万级的数据量2.针对移动端优化,移动端小屏上适于用手指在坐标系中进行缩放、平移。可选的SVG渲... 查看详情
pytorchtensor灰度图和rgb图相互转换的三种方法
目录灰度图(单通道图)和RGB图(三通道图)的区别方法一：在读入图片时用opencv/PIL转换方法二：numpy转换 查看详情
表示图的三种方法
（原址）三标准：图结构占用的空间确定图的一条给定边界花费的时间从给定节点处找到邻居花费的时间EdgeList以[v,w]为元素的列表，其中v，w为节点编号，每个元素表示一条边；如果有权重，则元素形式为[v,w,k]缺点：搜索某一... 查看详情
旭日图（sunburstchart）绘制：r语言&excel
旭日图（sunburstchart）也叫太阳图，一种圆环镶接图，每一个圆环就代表了同一级别的比例数据，离原点越近的圆环级别越高，最内层的圆表示层次结构的顶级。除了圆环外，旭日图还有若干从原点放射出去的‘射线’，这些‘... 查看详情
sql：数据去重的三种方法(代码片段)
数据去重的三种方法1、使用distinct去重distinct用来查询不重复记录的条数，用count(distinctid)来返回不重复字段的条数。用法注意：distinct【查询字段】，必须放在要查询字段的开头，即放在第一个参数；只能在SE... 查看详情
数据建模的三种分类（来自enterprisearchitect的文档）
数据建模分三种：概念建模，与技术无关，可以用来跟业务专家和商务人士讨论，可以用领域内的概念来表达，讨论和确认逻辑模型，对概念模型的细化，增加更多的细节，也更精确，但仍与技术无关，用来帮助分析师讨论和确... 查看详情
等待时间的三种方法(代码片段)
在执行自动化脚本的时候，很多时候会遇到定位不到控件而报错，先不要急于寻求他人，先自己排除以下情况。主要有俩点原因，1.脚本运行速度比页面加载速度快2.frame框架，第二种只要用switch_to.frame(‘默认是iframe标签的id‘)... 查看详情
判断图连通的三种方法——dfs，bfs，并查集
Description如果无向图G每对顶点v和w都有从v到w的路径，那么称无向图G是连通的。现在给定一张无向图,判断它是否是连通的。Input第一行有2个整数n和m(0<n,m<1000000),接下来m行每行有2个整数u,v(1<=u,v<=n)表示u和v有边连接。Output... 查看详情
php连接access数据库的三种方法
...儿吧最近想把一个asp的网站改成php的,无奈空间不支持mysql数据库,只好用access数据库了,但以前都是用的php+mysql,php+access数据库编程还真没有做过.感谢党,感谢cctv,感谢搜索引擎,这不找到一编不错的文 查看详情
6.request的三种获取数据的方法
其实一共有4种，不过form这种专门获取以post方式提交数据的方式目前还没学。所以就不太演示了另外需要注意的是，Request.params这种获取方式能不用就不要用了，有时候会出问题那么代码如下：第一个页面是index.aspx的代码：第一... 查看详情
样本数据异常值处理的三种方法
1.3sigma异常值识别数据需要服从正态分布，正负3∂的概率是99.7%，那么距离平均值3∂之外的值出现的概率为P(|x-u|3∂)=0.003，属于极个别的小概率事件。如果数据不服从正态分布，也可以用远离平均值的多少倍标... 查看详情
样本数据异常值处理的三种方法
1.3sigma异常值识别数据需要服从正态分布，正负3∂的概率是99.7%，那么距离平均值3∂之外的值出现的概率为P(|x-u|3∂)=0.003，属于极个别的小概率事件。如果数据不服从正态分布，也可以用远离平均值的多少倍标... 查看详情
样本数据异常值处理的三种方法
1.3sigma异常值识别数据需要服从正态分布，正负3∂的概率是99.7%，那么距离平均值3∂之外的值出现的概率为P(|x-u|3∂)=0.003，属于极个别的小概率事件。如果数据不服从正态分布，也可以用远离平均值的多少倍标... 查看详情
c#使用datasetdatatable更新数据库的三种实现方法
本文以实例形式讲述了使用DataSetDatatable更新数据库的三种实现方法，包括CommandBuilder方法、DataAdapter更新数据源以及使用sql语句更新。分享给大家供大家参考之用。具体方法如下：一、自动生成命令的条件CommandBuilder方法a)动态指... 查看详情
javascript中清空数组最有效的三种方法
文章目录1、用“length”清除2、用“splice”清除3、用“[]”清除1、用“length”清除用length方法可以很轻松地清空数组，代码示例：vararr=[1,2,3];1console.log(arr);arr.length=0;console.log(arr);123结果如下：2、用“splice”清除... 查看详情
mongodb的三种基础备份方法(代码片段)
目录一、快照二、数据文件拷贝三、mongodump与mongorestore一、快照 使用快照进行备份是最常用的一种方法，很多企业的备份产品都是基于此（爱数、commvault等）。下面以爱数的备份原理图为例。管理控制台启动备... 查看详情
mongodb的三种基础备份方法(代码片段)
目录一、物理备份-快照二、物理备份-数据文件拷贝三、逻辑备份-mongodump一、物理备份-快照 使用快照进行备份是最常用的一种方法，很多企业的备份产品都是基于此（爱数、commvault等）。下面以爱数的备份原理... 查看详情
javascript中清空数组最有效的三种方法(代码片段)
文章目录1、用“length”清除2、用“splice”清除3、用“[]”清除1、用“length”清除用length方法可以很轻松地清空数组，代码示例：vararr=[1,2,3];1console.log(arr);arr.length=0;console.log(arr);123结果如下：2、用“splice”清除... 查看详情