国家  china

Wijmo实现旭日图

概述

旭日图(Sunburst Chart)是一种现代饼图,它超越传统的饼图和环图,能表达清晰的层级和归属关系,以父子层次结构来显示数据构成情况。旭日图中,离远点越近表示级别越高,相邻两层中,是内层包含外层的关系。

在实际项目中使用旭日图,可以更细分溯源分析数据,真正了解数据的具体构成。而且,旭日图不仅数据直观,而且图表用起来特别炫酷,分分钟拉高数据汇报的颜值!很多数据场景都适合用旭日图,比如,在销售汇总报告中,方便看到每个店铺的销售业绩分布。

现在我们介绍一下Wijmo下旭日图的用法:

在JavaScript应用中使用旭日图的步骤:

  1. 添加AngularJS、Wijmo和Wijmo的AngularJS指令的引用。
  2. 在程序模块中包括Wijmo 5指令:
    var app = angular.module('app', ['wj']);
  3. 增加controller提供数据和逻辑。
  4. 增加Wijmo旭日图控件到页面中并且进行数据绑定。
  5. (可选)增加一些CSS定制输入控件的外观。

Html:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  <link rel="stylesheet" type="text/css" href="css/wijmo.css" />
  <link href="css/app.css" rel="stylesheet" type="text/css" />
  <script src="scripts/angular.js" type="text/javascript"></script>
  <script src="scripts/wijmo.js" type="text/javascript"></script>
  <script src="scripts/wijmo.chart.js" type="text/javascript"></script>
  <script src="scripts/wijmo.chart.hierarchical.js" type="text/javascript"></script>
  <script src="scripts/wijmo.angular.js" type="text/javascript"></script>
  <script src="scripts/app.js" type="text/javascript"></script>
</head>
<body ng-app="app" ng-controller="appCtrl">
  <!-- this is the Sunburst directive -->
  <wj-sunburst control="chart"
      items-source="itemsSource"
      binding="value"
      binding-name="bindngName">
  </wj-sunburst>

</body>
</html>

Js:

// declare app module
var app = angular.module('app', ['wj']);

// controller provides data
app.controller('simpleCtrl', function appCtrl($scope) {
    // create controls
    var data = [],
        times = [['Jan', 'Feb', 'Mar'], ['Apr', 'May', 'June'], ['Jul', 'Aug', 'Sep'], ['Oct', 'Nov', 'Dec']],
        years = [], year = new Date().getFullYear(), yearLen, i;

    yearLen = Math.max(Math.round(Math.abs(5 - Math.random() * 10)), 3);
    for (i = yearLen; i > 0; i--) {
        years.push(year - i);
    }
    // populate itemsSource
    years.forEach(y => {
        var addQuarter = Math.random() > 0.5;
        if (addQuarter) {
            times.forEach((q, idx) => {
                var addMonth = Math.random() > 0.5,
                    quar = 'Q' + (idx + 1);
                if (addMonth) {
                    q.forEach(m => {
                        data.push({
                            year: y.toString(),
                            quarter: quar,
                            month: m,
                            value: Math.round(Math.random() * 100)
                        });
                    });
                } else {
                    data.push({
                        year: y.toString(),
                        quarter: quar,
                        value: Math.round(Math.random() * 400)
                    });
                }
            });
        } else {
            data.push({
                year: y.toString(),
                value: Math.round(Math.random() * 1200)
            });
        }

运行结果如图:

image

旭日图基本特点:

基本特点

旭日图控件有5个基本的属性允许定制它的布局和外观:

  • innerRadius: 指定控件的内径支持圆环图。
  • offset: 指定从控件中心开始的切片的偏移量。
  • startAngle: 从9点中位置开始,指定角度开始画切片。
  • palette: 指定一个默认的颜色数组来渲染切片。
  • reversed: 决定控件化切换时顺时针(false)或逆时针(true).

图例和标题

图例属性能被用于自定义图表的图例外观。页面页脚属性能被用于增加一个标题给旭日图控件。

选择

旭日图控件允许您通过点击或触摸切片来选择数据点。使用selectionMode 属性指定你是否想通过数据点进行选择或者根本不选择(默认)。

给点设置selctionMode属性后,当用户在切片上点击的时候将会引起旭日图更新selection属性,并且应用"wj-state-selected"类给选中的元素。 设置旭日图的selectionMode给系列或者设置为None将会禁用控件内部的选择。

旭日图提供了三个属性来自定义选择:

  • selectedItemOffset: 指定从控件中心开始的选中的切边的偏移量。
  • selectedItemPosition: 指定选中的切片的位置。可供使用的选项是Top, Bottom,Left, Right,和None(默认)。
  • isAnimated: 决定是否动画方式进行选择。
更多信息请参照:

Wijmo产品网站:http://wijmo.gcpowertools.com.cn/products/wijmo-5/

Wijmo中文文档:http://wijmo.gcpowertools.com.cn/5/docs/

Wijmo中文学习教程:http://demo.gcpowertools.com.cn/wijmo5/learningwijmo/

转载声明:
欢迎将本站文章进行转载、演绎或用于商业目的,转载时请注明以下信息
文章转自:葡萄城控件产品博客,http://blog.gcpowertools.com.cn
原文地址:http://blog.gcpowertools.com.cn/post/Wijmo实现旭日图.aspx

不允许评论