《用旭日图展示数据的三种方法》由会员分享,可在线阅读,更多相关《用旭日图展示数据的三种方法(11页珍藏版)》请在金锄头文库上搜索。
1、用 旭日图 展示数据 的 三 种方法 什么是旭日图 ? 旭日图 ( Sunburst Chart)是一种现代 饼图,它 超越传统的饼图和环图, 能表达清晰的层级和归属关系,以父子层次结构来显示数据构成情况。旭日图中,离远点越近表示级别越高,相邻两层中,是内层包含外层的关系。 在实际项目中使用旭日图,可以更细分溯源分析数据,真正了解数据的具体构成。而且,旭日图不仅数据直观,而且图表用起来特别炫酷,分分钟拉高数据汇报的颜值!很多数据场景都适合用旭日图, 比如,在销售汇总报告中,方便看到每个店铺的销售业绩分布(如下图 ) : 做旭日图的三种方法 1. 用 Excel( 2016 最新版才有旭日图功能
2、) 第一步,创建数据 第二步 , 点击插入选项 , 选择 “图表”右下方的箭头 第三步 , 在弹出的对话框中选择 “所有图表”, 然后选择旭日图 第四步 , 点击确定 , 旭日图就创建完成了 。 所有的数据 以及层级关系都一目了然 。 2. 用 Spread Studio 表格控件 Spread Studio 表格控件是一个功能和 Excel 类似的表格控件,用于在应用系统中实现表格数据录入和编辑等交互功能,并且提供灵活的定制能力和丰富的数据可视化效果。 在 Spread Studio V10 版本中, Windows Forms 和 ASP.NET 平台都新增了旭日图,实现方法也很简单 ,
3、用 Spread 设计器,和在 Excel 中一样,只需要选择数据源,插入旭日图即可。 第一步,创建数据 第二步,选择旭日图样式 第三步,创建旭日图,即可 3. 用 Wijmo 前端控件集 我们尝试用 Wijmo 做一张复杂的 元素周期表 。传统的元素周期表展示了元素的信息,但是没有很好的展示元素归类的信息。我们现在用旭日图来做它,对这点进行改善。 传统的元素周期表 用 Wijmo 旭日图样式做出来的元素周期表 仅 需 3 步: 第一步,引入 Wijmo 相关的样式和 js 文件 1、引入自定义的 js 文件 2、定义一个 DIV 第二步, DataLoader.js,获得数据 创建了一个 D
4、ataLoader 类 , 其中提供两个方法 。 readFile 方法读取 json文 件 获 得 数 据 。 isInclude 方 法 判 断 数 组 中 是 否 存 在 指 定 的 元 素 。generateCollectionView 方法中对数据进行加工处理 。 var DataLoader = ; / 一级分类 var METALS_TITLE = 金属 ; var NON_METALS_TITLE = 非金属 ; var OTHERS_TITLE = 过渡元素 ; / 二级分类 var METAL_TYPES = 碱金属 |碱土金属 |过渡金属 |镧系元素 |锕系元素 |其他金
5、属 .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,
6、 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(functi
7、on (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.i
8、sInclude(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; ); cal
9、lback(data); ); ; generateCollectionView方法中调用 readFile获得 json数据 , 之后利用Wijmo中提供的 CollectionView对数据进行 2级分组。第 1级是金属、非金属、过渡元素。第 2级分别是他们的子级别。第 3级是元素,每个元素的 Value都是 1,表示元素的占比相同。 第三步, app.js, 数据分组 和前边的简单示例相比 , 这 里 绑定的数据源是 CollectionView.Groups, 它是 CollectionView 中的第一级分组 。 var mySunburst; function setSunburs
10、t(elementCollectionView) / 创建旭日图控件 mySunburst = new wijmo.chart.hierarchical.Sunburst(#periodic-sunburst); mySunburst.beginUpdate(); / 设置旭日图的图例不显示 mySunburst.legend.position = None; / 设置内圆半径 mySunburst.innerRadius = 0.1; / 设置选择模式 mySunburst.selectionMode = Point; / 设置数据显示的位置 mySunburst.dataLabel.pos
11、ition = 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); 以上就是 用 旭日图 展示数据的三种 方法, 供大家参考。