Wijmo 5

FlexPie 101

这个页面展示了如何开始使用Wijmo的FlexPie控件。

入门

在AngularJS应用中开始使用FlexPie的步骤:

  1. 为AngularJS,Wijmo和Wijmo的AngularJS指令添加引用。
  2. 在应用模块添加Wijmo 5指令:
    var app = angular.module('app', ['wj']);
  3. 添加一个控制器来提供数据和逻辑
  4. 向当前页面添加一个FlexPie控件,并且将它与数据绑定。
  5. (可选)添加一些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.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 FlexPie directive --> <wj-flex-pie items-source="itemsSource" binding="value" binding-name="name"> </wj-flex-pie> </body> </html>
// declare app module var app = angular.module('app', ['wj']); // controller provides data app.controller('simpleCtrl', function appCtrl($scope) { var names = ['Oranges', 'Apples', 'Pears', 'Bananas', 'Pineapples'], data = []; // populate itemsSource for (var i = 0; i < names.length; i++) { data.push({ name: names[i], value: Math.round(Math.random() * 100) }); } $scope.itemsSource = data; });

Result (live):

基本功能

FlexPie控件有5个基本属性,允许你自定义它的布局和外观:

下面这个样例可以让你观察到这些属性更改后的情况。而且,单击一个饼图切块会为数据点显示一个工具提示。

<wj-flex-pie control="chart" items-source="itemsSource" binding="value" binding-name="name" inner-radius="{​{ innerRadius }}" offset="{​{ offset }}" start-angle="{​{ startAngle }}" reversed="{​{ reversed }}"> </wj-flex-pie> <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.getData(); $scope.chart = null; $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.paletteChanged = function (sender) { var p = $scope.palettes[sender.selectedIndex]; $scope.palette = p; $scope.chart.palette = wijmo.chart.Palettes[p]; };

Result (live):

图例和标题

legend属性用来自定义图表图例的外观。headerfooter属性用来添加FlexPie控件的标题。

下面的实例允许你实时更改FlexPie的legend.position, headerfooter属性。

<wj-flex-pie items-source="itemsSource" binding="value" binding-name="name" header="{​{ header }}" footer="{​{ footer }}"> <wj-flex-chart-legend position="{​{ legendPosition }}"></wj-flex-chart-legend> </wj-flex-pie> <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 FlexPie'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 FlexPie'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.header = 'Fruit By Value'; $scope.footer = '2014 GrapeCity, inc.'; $scope.legendPosition = 'Right';

Result (live):

选择

FlexPie控件允许你通过单击或者触摸一个饼图切块来选择数据点。 使用selectionMode属性来指定是否允许对数据点的选择或者禁用选择(默认)。

设置selctionMode属性为Point会导致用户在单击饼图切块时,FlexPie自动更新selection属性, 并且将"wj-state-selected"类应用到选中元素中。设置FlexPie的selectionMode属性为SeriesNone会禁用控件内的选择。

FlexPie提供三种额外的属性来自定义选择:

<wj-flex-pie items-source="itemsSource" binding="value" binding-name="name" selection-mode="Point" selected-item-position="{​{ selectedPosition }}" selected-item-offset="{​{ selectedOffset }}" is-animated="{​{ isAnimated }}"> </wj-flex-pie> <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.selectedPosition = 'Top'; $scope.selectedOffset = 0; $scope.isAnimated = true;

Result (live):

None Left Top Right Bottom

主题

FlexPie控件的外观很大程度上是在CSS中定义。除了默认的主题, 我们包括了一些专业设计的主题,它们自定义了Wijmo控件的外观来达到一个一致的,具有吸引力的效果。

你可以使用CSS自定义FlexPie的外观。要做到这一点,从默认主题复制CSS规则到一个新的CSS文件并且修改需要的属性。

在这个样例中,我们向控件添加了一个"custom-pie-chart"CSS类并且定义了一些CSS规则来改变填充,字体集和页眉、页尾、图例的字体粗细。

<wj-flex-pie items-source="itemsSource" binding="value" binding-name="name" header="Header" footer="Footer" class="custom-pie-chart"> </wj-flex-pie>
$scope.itemsSource = dataSvc.getData();
.custom-pie-chart.wj-flexchart .wj-header .wj-title, .custom-pie-chart.wj-flexchart .wj-footer .wj-title, .custom-pie-chart.wj-flexchart .wj-legend > .wj-label { fill: #666; font-family: 'Courier New', Courier, monospace; font-weight: bold; }

Result (live):