请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

断天涯大虾
社区贡献组   /  发表于:2017-3-28 14:09  /   查看:5967  /  回复:0
本帖最后由 断天涯大虾 于 2017-3-28 14:27 编辑

什么是旭日图?
旭日图(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文件
  1. <script src="scripts/DataLoader.js"></script><script src="scripts/app.js"></script>
复制代码
2、定义一个DIV
  1. <div id="periodic-sunburst" class="periodic-sunburst"></div>
复制代码

第二步,DataLoader.js,获得数据
创建了一个DataLoader类,其中提供两个方法。readFile方法读取json文件获得数据。isInclude 方法判断数组中是否存在指定的元素。generateCollectionView方法中对数据进行加工处理。
  1. var DataLoader = {};
  2. // 一级分类
  3. var METALS_TITLE = "金属";
  4. var NON_METALS_TITLE = "非金属";
  5. var OTHERS_TITLE = "过渡元素";
  6. // 二级分类
  7. var METAL_TYPES = '碱金属|碱土金属|过渡金属|镧系元素|锕系元素|其他金属'.split('|');
  8. var NON_METAL_TYPES = '惰性气体|卤素|非金属'.split('|');
  9. var OTHER_TYPES = '准金属|超锕系'.split('|');
  10. DataLoader = {
  11.     readFile: function (filePath, callback) {
  12.         var reqClient = new XMLHttpRequest();
  13.         reqClient.onload = callback;
  14.         reqClient.open("get", filePath, true);
  15.         reqClient.send();
  16.     },
  17.     isInclude: function (arr, data) {
  18.         if (arr.toString().indexOf(data) > -1)
  19.             return true;
  20.         else
  21.             return false;
  22.     },
  23.     generateCollectionView: function (callback) {
  24.         DataLoader.readFile('data/elements.json', function (e) {
  25.             // 获取数据
  26.             var rawElementData = JSON.parse(this.responseText);
  27.             var elementData = rawElementData['periodic-table-elements'].map(function (item) {
  28.                 item.properties.value = 1;
  29.                 return item.properties;
  30.             });
  31.             var data = new wijmo.collections.CollectionView(elementData);
  32.             //  利用wijmo.collections.PropertyGroupDescription 进行第一级分组
  33.             data.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('type', function (item, prop) {
  34.                 if (DataLoader.isInclude(METAL_TYPES, item[prop])) {
  35.                     return METALS_TITLE;
  36.                 } else if (DataLoader.isInclude(NON_METAL_TYPES, item[prop])) {
  37.                     return NON_METALS_TITLE;
  38.                 } else {
  39.                     return OTHERS_TITLE;
  40.                 }
  41.             }));
  42.             // 进行第二级分组
  43.             data.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('type', function (item, prop) {
  44.                 return item[prop];
  45.             }));
  46.             callback(data);
  47.         });
  48.     }
  49. };
复制代码
generateCollectionView方法中调用readFile获得json数据,之后利用Wijmo中提供的CollectionView对数据进行2级分组。第1级是金属、非金属、过渡元素。第2级分别是他们的子级别。第3级是元素,每个元素的Value都是1,表示元素的占比相同。

第三步,app.js,数据分组
和前边的简单示例相比,这里绑定的数据源是CollectionView.Groups,它是CollectionView中的第一级分组。
  1. var mySunburst;
  2. function setSunburst(elementCollectionView) {
  3.     // 创建旭日图控件
  4.     mySunburst = new wijmo.chart.hierarchical.Sunburst('#periodic-sunburst');
  5.     mySunburst.beginUpdate();
  6.     // 设置旭日图的图例不显示
  7.     mySunburst.legend.position = 'None';
  8.     // 设置内圆半径
  9.     mySunburst.innerRadius = 0.1;
  10.     // 设置选择模式
  11.     mySunburst.selectionMode = 'Point';
  12.     // 设置数据显示的位置
  13.     mySunburst.dataLabel.position = 'Center';
  14.     // 设置数据显示的内容
  15.     mySunburst.dataLabel.content = '{name}';
  16.     // 进行数据绑定
  17.     mySunburst.itemsSource = elementCollectionView.groups;
  18.     // 包含图表值的属性名
  19.     mySunburst.binding = 'value';
  20.     // 数据项名称
  21.     mySunburst.bindingName = ['name', 'name', 'symbol'];
  22.     // 在分层数据中生成子项的属性的名称。
  23.     mySunburst.childItemsPath = ['groups', 'items'];
  24.     mySunburst.endUpdate();
  25. };
  26. DataLoader.generateCollectionView(setSunburst);
复制代码
以上就是用旭日图展示数据的三种方法,供大家参考。


   
关于葡萄城:全球最大的控件提供商,世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商,为超过75%的全球财富500强企业提供服务。

1 个回复

倒序浏览
您需要登录后才可以回帖 登录 | 立即注册
返回顶部