Wijmo 5

FlexPie入門

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

Getting Started

Steps for getting started with the FlexPie control in KnockoutJS applications:

  1. Add references to KnockoutJS, Wijmo, and Wijmo's KnockoutJS bindings.
  2. Add a view model to provide data and logic.
  3. Wijmo FlexPieコントロールをページに追加してデータにバインドします。
  4. (オプション)入力コントロールの外観をカスタマイズするCSSを追加します。
<html> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="css/wijmo.css" /> <link rel="stylesheet" href="styles/app.css" /> <script src="scripts/knockout.js" type="text/javascript"></script> <script src="scripts/wijmo.js" type="text/javascript"></script> <script src="scripts/wijmo.input.js" type="text/javascript"></script> <script src="scripts/wijmo.chart.js" type="text/javascript"></script> <script src="scripts/wijmo.knockout.js" type="text/javascript"></script> <script src="scripts/bindings/appBindings.js"></script> <script src="scripts/app.js"></script> <script src="scripts/viewmodels/appViewModel.js"></script> </head> <body> <!-- this is the chart --> <div data-bind="wjFlexPie: { itemsSource: itemsSource, binding: 'value', bindingName: 'name' }"> </div> </body> </html>
function SimpleVM() { 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) }); } this.itemsSource = data; } (function() { ko.applyBindings(new SimpleVM()); })();

結果(ライブ):

Basic Features

FlexPieコントロールでは、以下の5つの基本プロパティを使用してレイアウトや外観をカスタマイズできます。

以下の例で、これらのプロパティを変更したときにどのようになるかを確認できます。また、パイスライスをクリックすると、そのデータポイントのツールチップが表示されます。

<div data-bind="wjFlexPie: { control: chart, itemsSource: itemsSource, binding: 'value', bindingName: 'name', innerRadius: innerRadius, offset: offset, startAngle: startAngle, reversed: reversed}"> </div> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">内側半径</label> <div class="col-md-9"> <input data-bind="wjInputNumber: { value: innerRadius, min: 0, max: 1, step: .1, format: 'n' }" /> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Offset</label> <div class="col-md-9"> <input data-bind="wjInputNumber: { value: offset, min: 0, max: 1, step: .1, format: 'n' }" /> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">開始角度</label> <div class="col-md-9"> <input data-bind="wjInputNumber: { value: startAngle, min: -360, max: 360, step: 45 }"/> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div data-bind="wjMenu: { value: palette, header: 'Palette', itemClicked: paletteChanged }"> <span data-bind="wjMenuItem: { value: 'standard' }">Standard</span> <span data-bind="wjMenuItem: { value: 'cocoa' }">Cocoa</span> <span data-bind="wjMenuItem: { value: 'coral' }">Coral</span> <span data-bind="wjMenuItem: { value: 'dark' }">Dark</span> <span data-bind="wjMenuItem: { value: 'highcontrast' }">High Contrast</span> <span data-bind="wjMenuItem: { value: 'light' }">Light</span> <span data-bind="wjMenuItem: { value: 'midnight' }">Midnight</span> <span data-bind="wjMenuItem: { value: 'minimal' }">Minimal</span> <span data-bind="wjMenuItem: { value: 'modern' }">Modern</span> <span data-bind="wjMenuItem: { value: 'organic' }">Organic</span> <span data-bind="wjMenuItem: { value: 'slate' }">Slate</span> </div> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div class="checkbox"> <label> <input type="checkbox" data-bind="checked: reversed"> 逆方向 </label> </div> </div> </div> </div>
var self = this; // get a reference to the FlexPie control this.chart = ko.observable(undefined); this.itemsSource = data; this.innerRadius = ko.observable(0); this.offset = ko.observable(0); this.startAngle = ko.observable(0); this.reversed = ko.observable(false); this.palette = ko.observable('standard'); this.paletteChanged = function (data, sender, args) { // update FlexPie control's palette self.chart().palette = wijmo.chart.Palettes[sender.selectedValue]; }

結果(ライブ):

Standard Cocoa Coral Dark High Contrast Light Midnight Minimal Modern Organic Slate

Legend & Titles

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

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

<div data-bind="wjFlexPie: { itemsSource: itemsSource, binding: 'value', bindingName: 'name', header: header, footer: footer }"> <div data-bind="wjFlexChartLegend: { position: legendPosition }"></div> </div> <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" data-bind="value: header, valueUpdate: 'input'" 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" data-bind="value: footer, valueUpdate: 'input'" placeholder="Specify the FlexPie's footer" /> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div data-bind="wjMenu: { value: legendPosition, header: '凡例の位置' }"> <span data-bind="wjMenuItem: { value: 'None' }">None</span> <span data-bind="wjMenuItem: { value: 'Left' }">Left</span> <span data-bind="wjMenuItem: { value: 'Top' }">Top</span> <span data-bind="wjMenuItem: { value: 'Right' }">Right</span> <span data-bind="wjMenuItem: { value: 'Bottom' }">Bottom</span> </div> </div> </div> </div>
this.itemsSource = data; this.header = ko.observable('Fruit by Value'); this.footer = ko.observable('2014 GrapeCity, inc.'); this.legendPosition = ko.observable('Right');

結果(ライブ):

None Left Top Right Bottom

Selection

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

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

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

<div data-bind="wjFlexPie: { itemsSource: itemsSource, binding: 'value', bindingName: 'name', selectionMode: 'Point', selectedItemPosition: selectedPosition, selectedItemOffset: selectedOffset, isAnimated: isAnimated }"> </div> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">選択項目のオフセット</label> <div class="col-md-9"> <input data-bind="wjInputNumber: { value: selectedOffset, min: 0, max: .5, step: .1, format: 'n' }"/> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div data-bind="wjMenu: { header: '選択項目の位置', value: selectedPosition}"> <span data-bind="wjMenuItem: { value: 'None' }">None</span> <span data-bind="wjMenuItem: { value: 'Left' }">Left</span> <span data-bind="wjMenuItem: { value: 'Top' }">Top</span> <span data-bind="wjMenuItem: { value: 'Right' }">Right</span> <span data-bind="wjMenuItem: { value: 'Bottom' }">Bottom</span> </div> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div class="checkbox"> <label> <input type="checkbox" data-bind="checked: isAnimated"> アニメーション表示 </label> </div> </div> </div> </div>
this.itemsSource = data; this.selectedPosition = ko.observable('Top'); this.selectedOffset = ko.observable(0); this.isAnimated = ko.observable(true);

結果(ライブ):

None Left Top Right Bottom

Theming

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

FlexPieコントロールの外観はCSSを使用してカスタマイズできます。そのためには、デフォルトテーマから新しいCSSファイルにCSSルールをコピーし、必要に応じてプロパティを変更します。

この例では、"custom-pie-chart" CSSクラスをコントロールに追加し、ヘッダ、フッタ、および凡例の塗りつぶし、フォントファミリー、およびフォントウェイトを変更するCSSルールを定義しています。

<div class="custom-pie-chart" data-bind="wjFlexPie: { itemsSource: itemsSource, binding: 'value', bindingName: 'name', header: 'Header', footer: 'Footer' }"> </div>
this.itemsSource = data;
.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; }

結果(ライブ):