用 旭日图 展示数据 的 三 种方法 什么是旭日图 ？ 旭日图 （ Sunburst Chart）是一种现代 饼图，它 超越传统的饼图和环图， 能表达清晰的层级和归属关系，以父子层次结构来显示数据构成情况。旭日图中，离远点越近表示级别越高，相邻两层中，是内层包含外层的关系。 在实际项目中使用旭日图，可以更细分溯源分析数据，真正了解数据的具体构成。而且，旭日图不仅数据直观，而且图表用起来特别炫酷，分分钟拉高数据汇报的颜值！很多数据场景都适合用旭日图， 比如，在销售汇总报告中，方便看到每个店铺的销售业绩分布（如下图 ） : 做旭日图的三种方法 1. 用 Excel（ 2016 最新版才有旭日图功能） 第一步，创建数据 第二步 ， 点击插入选项 ， 选择 “图表”右下方的箭头 第三步 ， 在弹出的对话框中选择 “所有图表”， 然后选择旭日图 第四步 ， 点击确定 ， 旭日图就创建完成了 。 所有的数据 以及层级关系都一目了然 。 2. 用 Spread Studio 表格控件 Spread Studio 表格控件是一个功能和 Excel 类似的表格控件，用于在应用系统中实现表格数据录入和编辑等交互功能，并且提供灵活的定制能力和丰富的数据可视化效果。 在 Spread Studio V10 版本中， Windows Forms 和 ASP.NET 平台都新增了旭日图，实现方法也很简单 ， 用 Spread 设计器，和在 Excel 中一样，只需要选择数据源，插入旭日图即可。 第一步，创建数据 第二步，选择旭日图样式 第三步，创建旭日图，即可 3. 用 Wijmo 前端控件集 我们尝试用 Wijmo 做一张复杂的 元素周期表 。传统的元素周期表展示了元素的信息，但是没有很好的展示元素归类的信息。我们现在用旭日图来做它，对这点进行改善。 传统的元素周期表 用 Wijmo 旭日图样式做出来的元素周期表 仅 需 3 步： 第一步，引入 Wijmo 相关的样式和 js 文件 1、引入自定义的 js 文件 2、定义一个 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 = rawElementDataperiodic-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, itemprop) return METALS_TITLE; else if (DataLoader.isInclude(NON_METAL_TYPES, itemprop) return NON_METALS_TITLE; else return OTHERS_TITLE; ); / 进行第二级分组 data.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription(type, function (item, prop) return itemprop; ); 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); 以上就是 用 旭日图 展示数据的三种 方法， 供大家参考。