FlexPie入門 | Wijmo
Wijmo

FlexPie入門

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

はじめに

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

  1. Wijmoへの参照を追加します。
  2. Wijmoコントロールのホストとして機能するマークアップを追加します。
  3. JavaScriptを使用してWijmoコントロールを初期化します。
  4. (オプション)コントロールの外観をカスタマイズするCSSを追加します。
HTML
<div id="introChart"></div>
JS
var introChart = new wijmo.chart.FlexPie('#introChart', { binding: 'value', bindingName: 'name', itemsSource: getData() });

結果(ライブ):

基本機能

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

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

HTML
<div id="basicChart"></div> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">内側半径</label> <div class="col-md-9"> <input id="basicInnerRadius" type="text" /> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Offset</label> <div class="col-md-9"> <input id="basicOffset" type="text" /> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">開始角度</label> <div class="col-md-9"> <input id="basicStartAngle" type="text" /> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div id="basicPalette"></div> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div class="checkbox"> <label> <input id="basicReversed" type="checkbox" /> Reversed </label> </div> </div> </div> </div>
JS
var basicChart = new wijmo.chart.FlexPie('#basicChart', { binding: 'value', bindingName: 'name', itemsSource: getData() }); // change the pie properties var innerRadius = new wijmo.input.InputNumber('#basicInnerRadius', { min: 0, max: 1, step: 0.1, format: 'n1', valueChanged: function (s, e) { if (s.value >= s.min && s.value <= s.max) { basicChart.innerRadius = s.value; } } }); var offset = new wijmo.input.InputNumber('#basicOffset', { min: 0, max: 1, step: 0.1, format: 'n1', valueChanged: function (s, e) { if (s.value >= s.min && s.value <= s.max) { basicChart.offset = s.value; } } }); var startAngle = new wijmo.input.InputNumber('#basicStartAngle', { min: -360, max: 360, step: 45, format: 'n0', valueChanged: function (s, e) { if (s.value >= s.min && s.value <= s.max) { basicChart.startAngle = s.value; } } }); var palettes = new wijmo.input.Menu('#basicPalette', { itemsSource: 'standard,cocoa,coral,dark,highcontrast,light,midnight,modern,organic,slate,zen,cyborg,superhero,flatly,darkly,cerulan'.split(','), itemClicked: function (s, e) { basicChart.palette = wijmo.chart.Palettes[s.text]; updateMenuHeader(s, 'パレット'); } }); updateMenuHeader(palettes, 'パレット'); document.getElementById('basicReversed').addEventListener('click', function (e) { basicChart.reversed = e.target.checked; });

結果(ライブ):

凡例とタイトル

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

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

HTML
<div id="ltChart"></div> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">Header</label> <div class="col-md-9"> <input id="ltHeader" type="text" class="form-control" 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 id="ltFooter" type="text" class="form-control" placeholder="Specify the FlexPie's footer" /> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <select id="ltLegPos"> <option value="None">None</option> <option value="Left">Left</option> <option value="Top">Top</option> <option value="Right">Right</option> <option value="Bottom">Bottom</option> </select> </div> </div> </div>
JS
var ltChart = new wijmo.chart.FlexPie('#ltChart', { itemsSource: getData(), binding: 'value', bindingName: 'name', header: 'Fruit By Value', footer: '(c) ' + new Date().getFullYear() + ' GrapeCity, inc.' }); // header input var header = document.getElementById('ltHeader'); header.value = ltChart.header; header.addEventListener('input', function (e) { ltChart.header = e.target.value; }); // footer input var footer = document.getElementById('ltFooter'); footer.value = ltChart.footer; footer.addEventListener('input', function (e) { ltChart.footer = e.target.value; }); // legend position var ltLegPos = new wijmo.input.Menu('#ltLegPos', { itemClicked: function (s, e) { ltChart.legend.position = s.selectedValue; updateMenuHeader(s, '凡例の位置'); }, selectedValue: 'Right' }); updateMenuHeader(ltLegPos, '凡例の位置');

結果(ライブ):

選択

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

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

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

HTML
<div id="selChart"></div> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">選択項目のオフセット</label> <div class="col-md-9"> <input id="selItemOffset" type="text" /> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <select id="selItemPos"> <option value="None">None</option> <option value="Left">Left</option> <option value="Top">Top</option> <option selected value="Right">Right</option> <option value="Bottom">Bottom</option> </select> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div class="checkbox"> <label> <input id="selAnimated" type="checkbox" checked="checked"> Animated </label> </div> </div> </div> </div>
JS
var selChart = new wijmo.chart.FlexPie('#selChart', { binding: 'value', bindingName: 'name', itemsSource: getData(), isAnimated: true, selectionMode: 'Point', selectedItemPosition: 'Top' }); // change chart properties var inputNumber = new wijmo.input.InputNumber('#selItemOffset', { min: 0, max: 0.5, step: 0.1, format: 'n', valueChanged: function (s, e) { if (s.value >= s.min && s.value <= s.max) { selChart.selectedItemOffset = s.value; } } }); var selItemPos = new wijmo.input.Menu('#selItemPos', { itemClicked: function (s, e) { selChart.selectedItemPosition = s.selectedValue; updateMenuHeader(s, '選択項目の位置'); }, selectedValue: 'Top' }); updateMenuHeader(selItemPos, '選択項目の位置'); document.getElementById('selAnimated').addEventListener('click', function (e) { chart.isAnimated = e.target.checked; });

結果(ライブ):

テーマ

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

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

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

HTML
<div id="themeChart" class="custom-pie-chart"></div>
JS
var themeChart = new wijmo.chart.FlexPie('#themeChart', { binding: 'value', bindingName: 'name', itemsSource: getData(), header: 'Header', footer: 'Footer' });
CSS
/* pie with custom styling */ .custom-pie-chart.wj-flexpie .wj-header .wj-title, .custom-pie-chart.wj-flexpie .wj-footer .wj-title, .custom-pie-chart.wj-flexpie .wj-legend > .wj-label { fill: #666; font-family: 'Courier New', Courier, monospace; font-weight: bold; }

結果(ライブ):