Wijmo 5

FlexPie入門

このページでは、WijmoのFlexPieコントロールを使い始める方法を示します。

はじめに

FlexPieコントロールをAngularJSアプリケーションで使用する手順は以下のとおりです。

  1. AngularJS、Wijmo、およびWijmoのAngularJSディレクティブへの参照を追加します。
  2. appモジュールにWijmo 5ディレクティブを含めます。
    var app = angular.module('app', ['wj']);
  3. コントローラーにデータとロジックを追加します。
  4. Wijmo 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>
// appモジュールを宣言します。 var app = angular.module('app', ['wj']); // コントローラーによってデータを提供します。 app.controller('simpleCtrl', function appCtrl($scope) { var names = ['Oranges', 'Apples', 'Pears', 'Bananas', 'Pineapples'], data = []; // itemsSourceにデータを設定します。 for (var i = 0; i < names.length; i++) { data.push({ name: names[i], value: Math.round(Math.random() * 100) }); } $scope.itemsSource = data; });

結果(ライブ):

基本機能

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">内側半径</label> <div class="col-md-9"> <wj-input-number control="inputInnerRadius" value="ctx.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 control="inputOffset" value="ctx.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">開始角度</label> <div class="col-md-9"> <wj-input-number control="inputStartAngle" value="ctx.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="パレット: <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"> 逆方向 </label> </div> </div> </div> </div>
$scope.itemsSource = dataSvc.getData(); $scope.chart = null; $scope.inputInnerRadius = null; $scope.inputOffset = null; $scope.inputStartAngle = 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.ctx = { innerRadius: 0, offset: 0, startAngle: 0 }; $scope.$watch('ctx.innerRadius', function () { var innerRadius = $scope.inputInnerRadius, val = $scope.ctx.innerRadius; if (innerRadius != null) { if (val < innerRadius.min || val > innerRadius.max) { return; } $scope.innerRadius = val; } }); $scope.$watch('ctx.offset', function () { var offset = $scope.inputOffset, val = $scope.ctx.offset; if (offset != null) { if (val < offset.min || val > offset.max) { return; } $scope.offset = val; } }); $scope.$watch('ctx.startAngle', function () { var startAngle = $scope.inputStartAngle, val = $scope.ctx.startAngle; if (startAngle != null) { if (val < startAngle.min || val > startAngle.max) { return; } $scope.startAngle = val; } }); $scope.paletteChanged = function (sender) { var p = $scope.palettes[sender.selectedIndex]; $scope.palette = p; $scope.chart.palette = wijmo.chart.Palettes[p]; };

結果(ライブ):

凡例とタイトル

legendプロパティを使用して、チャートの凡例の外観をカスタマイズできます。headerプロパティとfooterプロパティを使用してFlexPieコントロールにタイトルを追加することもできます。

以下の例では、FlexPieのlegend.positionheaderfooterの各プロパティをリアルタイムに調整できます。

<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="凡例の位置" value="legendPosition"> <wj-menu-item value="'None'"> <wj-menu-item value="'Left'">左</wj-menu-item> <wj-menu-item value="'Top'">上</wj-menu-item> <wj-menu-item value="'Right'">右</wj-menu-item> <wj-menu-item value="'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';

結果(ライブ):

なし

選択

FlexPieコントロールでは、パイスライスをクリックまたはタッチすることでデータポイントを選択できます。データポイント単位で選択できるようにするか、あるいはまったく選択できないようにするか(デフォルト)を指定するには、selectionModeプロパティを使用します。

selectionModeプロパティをPointに設定すると、ユーザーがパイスライスをクリックしたときにselectionプロパティが更新され、選択された要素に"wj-state-selected"クラスが適用されます。FlexPieのselectionModeプロパティをSeriesまたはNoneに設定すると、コントロール内の選択が無効になります。

FlexPieには、選択をカスタマイズするために以下の3つの追加プロパティが用意されています。

<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">選択項目のオフセット</label> <div class="col-md-9"> <wj-input-number control="inputSelectedOffset" value="ctx.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="選択項目の位置" value="selectedPosition"> <wj-menu-item value="'None'"> <wj-menu-item value="'Left'">左</wj-menu-item> <wj-menu-item value="'Top'">上</wj-menu-item> <wj-menu-item value="'Right'">右</wj-menu-item> <wj-menu-item value="'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"> アニメーション表示 </label> </div> </div> </div> </div>
$scope.itemsSource = dataSvc.getData(); $scope.selectedPosition = 'Top'; $scope.selectedOffset = 0; $scope.isAnimated = true; $scope.inputSelectedOffset = null; $scope.ctx = { selectedOffset: 0}; $scope.$watch('ctx.selectedOffset', function () { var selectedOffset = $scope.inputSelectedOffset, val = $scope.ctx.selectedOffset; if (selectedOffset != null) { if (val < selectedOffset.min || val > selectedOffset.max) { return; } $scope.selectedOffset = val; } });

結果(ライブ):

なし

テーマ

FlexPieコントロールの外観は、ほとんどがCSSで定義されます。デフォルトテーマに加えてプロフェッショナルなデザインのテーマが多数用意されており、すべてのWijmoコントロールの外観をカスタマイズして一貫性のある魅力的な見た目を提供できます。

FlexPieコントロールの外観はCSSを使用してカスタマイズできます。そのためには、デフォルトテーマから新しい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; }

結果(ライブ):