旭日图简介

入门

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

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

<!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">  <wj-sunburst control="chart" items-source="itemsSource" binding="value" binding-name="bindngName"> </wj-sunburst> </body> </html>

// 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) }); } }); $scope.chart = null; $scope.bindingName = ['year', 'quarter', 'month']; $scope.$watch('chart', function () { if ($scope.chart) { $scope.chart.dataLabel.position = wijmo.chart.PieLabelPosition.Center; $scope.chart.dataLabel.content = '{name}'; } }); $scope.itemsSource = data; });

Result (live):

基本特点

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

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

下面的例子让你看到当你改变这些属性时发生了什么。点击切片是将会为数据点显示一个工具提示。

<wj-sunburst control="chart" items-source="itemsSource" binding="value" binding-name="bindingName" child-items-path="childItemsPath" inner-radius="{{ innerRadius }}" offset="{{ offset }}" start-angle="{{ startAngle }}" reversed="{{ reversed }}"> </wj-sunburst> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">Inner Radius</label> <div class="col-md-9"> <wj-input-number value="innerRadius" min="0" max="1" step=".1" format="n"> </wj-input-number> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Offset</label> <div class="col-md-9"> <wj-input-number value="offset" min="0" max="1" step=".1" format="n"> </wj-input-number> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Start Angle</label> <div class="col-md-9"> <wj-input-number value="startAngle" min="-360" max="360" step="45"> </wj-input-number> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <wj-menu header="Palette: <b>{{ palette }}</b>" items-source="palettes" item-clicked="paletteChanged(s, e)"> </wj-menu> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div class="checkbox"> <label> <input type="checkbox" ng-model="reversed"> Reversed? </label> </div> </div> </div> </div>

$scope.itemsSource = dataSvc.getHierarchicalData(); $scope.chart = null; $scope.bindingName = ['year', 'quarter', 'month']; $scope.childItemsPath = 'items'; $scope.innerRadius = 0; $scope.offset = 0; $scope.startAngle = 0; $scope.reversed = false; $scope.palette = 'standard'; $scope.palettes = ['standard', 'cocoa', 'coral', 'dark', 'highcontrast', 'light', 'midnight', 'minimal', 'modern', 'organic', 'slate']; $scope.$watch('chart', function () { if ($scope.chart) { $scope.chart.dataLabel.position = wijmo.chart.PieLabelPosition.Center; $scope.chart.dataLabel.content = '{name}'; } }); $scope.paletteChanged = function (sender) { var p = $scope.palettes[sender.selectedIndex]; $scope.palette = p; $scope.chart.palette = wijmo.chart.Palettes[p]; };

Result (live):

Inner Radius

Offset

Start Angle

Reversed?

图例和标题

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

下面这个例子允许你实时的修改旭日图的legend.position、header、 footer属性。

<wj-sunburst items-source="itemsSource" binding="value" binding-name="bindingName" header="{{ header }}" footer="{{ footer }}"> <wj-flex-chart-legend position="{{ legendPosition }}"></wj-flex-chart-legend> </wj-sunburst> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">Header</label> <div class="col-md-9"> <input type="text" class="form-control" ng-model="header" placeholder="Specify the Sunburst's header" /> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Footer</label> <div class="col-md-9"> <input type="text" class="form-control" ng-model="footer" placeholder="Specify the Sunburst's footer" /> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <wj-menu header="Legend Position" value="legendPosition"> <wj-menu-item value="'None'">None</wj-menu-item> <wj-menu-item value="'Left'">Left</wj-menu-item> <wj-menu-item value="'Top'">Top</wj-menu-item> <wj-menu-item value="'Right'">Right</wj-menu-item> <wj-menu-item value="'Bottom'">Bottom</wj-menu-item> </wj-menu> </div> </div> </div>

$scope.itemsSource = dataSvc.getData(); $scope.bindingName = ['year', 'quarter', 'month']; $scope.header = 'Fruit By Value'; $scope.footer = '2014 GrapeCity, inc.'; $scope.legendPosition = 'Right';

Result (live):

Header

Footer

None

Left

Top

Right

Bottom

选择

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

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

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

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

<wj-sunburst items-source="itemsSource" binding="value" binding-name="bindingName" selection-mode="Point" selected-item-position="{{ selectedPosition }}" selected-item-offset="{{ selectedOffset }}" is-animated="{{ isAnimated }}"> </wj-sunburst> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">Selected Item Offset</label> <div class="col-md-9"> <wj-input-number value="selectedOffset" min="0" max=".5" step=".1" format="n"> </wj-input-number> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <wj-menu header="Selected Item Position" value="selectedPosition"> <wj-menu-item value="'None'">None</wj-menu-item> <wj-menu-item value="'Left'">Left</wj-menu-item> <wj-menu-item value="'Top'">Top</wj-menu-item> <wj-menu-item value="'Right'">Right</wj-menu-item> <wj-menu-item value="'Bottom'">Bottom</wj-menu-item> </wj-menu> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div class="checkbox"> <label> <input type="checkbox" ng-model="isAnimated"> Is Animated? </label> </div> </div> </div> </div>

$scope.itemsSource = dataSvc.getData(); $scope.bindingName =: ['year', 'quarter', 'month']; $scope.selectedPosition = 'Top'; $scope.selectedOffset = 0; $scope.isAnimated = true;

Result (live):

Selected Item Offset

None

Left

Top

Right

Bottom

Is Animated?

主题

旭日图控件的外观很大程度上是在CSS中定义。除了默认的主题我们也包括了一些专业设计的主题，可以自定义Wijmo控件的外观实现一个一致的、有吸引力的外观。

你也可以使用CSS自定义旭日图的外观。为了实现这个，你需要从默认的CSS拷贝出一个新的CSS文件，然后修改你需要的属性。

在这个例子中，我们给控件增加了"custom-sunburst-chart"CSS类，并且定义了一些CSS规则来修改填充、字体家族、以及页眉的字体重量、切片的填充色。

<wj-sunburst control="chart" items-source="itemsSource" binding="value" binding-name="name" header="Bullseye(target)" child-items-path="childItemsPath" class="custom-sunburst-chart"> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> </wj-sunburst>

$scope.itemsSource = dataSvc.getThemingData(); $scope.childItemsPath = 'items'; $scope.$watch('chart', function () { if ($scope.chart) { $scope.chart.tooltip.content = ''; } });

.custom-sunburst-chart.wj-sunburst .wj-header .wj-title { fill: #666; font-family: 'Courier New', Courier, monospace; font-weight: bold; } .custom-sunburst-chart.wj-sunburst ellipse, .custom-sunburst-chart.wj-sunburst path { stroke-width: 0; } .custom-sunburst-chart.wj-sunburst ellipse { fill: yellow; } .custom-sunburst-chart.wj-sunburst .slice-level2 > path { fill: red; } .custom-sunburst-chart.wj-sunburst .slice-level3 > path { fill: blue; } .custom-sunburst-chart.wj-sunburst .slice-level4 > path { fill: black; } .custom-sunburst-chart.wj-sunburst .slice-level5 > path { fill: white; stroke-width: 2; stroke: black; }