Wijmo 5

FlexPie入門

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

はじめに

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

  1. Wijmoへの参照を追加します。
  2. Wijmoコントロールのホストとして機能するマークアップを追加します。
  3. JavaScriptを使用してWijmoコントロールを初期化します。
  4. (オプション)入力コントロールの外観をカスタマイズする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/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> </head> <body> <!-- FlexPie --> <div id="introChart"></div> </body> </html>
// create controls var data = [], chart = new wijmo.chart.FlexPie('#introChart'), names = ['Oranges', 'Apples', 'Pears', 'Bananas', 'Pineapples']; // populate itemsSource for (var i = 0; i < names.length; i++) { data.push({ name: names[i], value: Math.round(Math.random() * 100) }); } // initialize FlexPie's properties chart.beginUpdate(); chart.binding = 'value'; chart.bindingName = 'name'; chart.itemsSource = data; chart.endUpdate();

結果(ライブ):

基本機能

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

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

<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" /> 逆方向 </label> </div> </div> </div> </div>
// create controls var chart = new wijmo.chart.FlexPie('#basicChart'), innerRadius = new wijmo.input.InputNumber('#basicInnerRadius'), offset = new wijmo.input.InputNumber('#basicOffset'), startAngle = new wijmo.input.InputNumber('#basicStartAngle'), palettes = new wijmo.input.Menu('#basicPalette'), reversed = document.getElementById('basicReversed'); // initialize FlexPie's properties chart.beginUpdate(); chart.binding = 'value'; chart.bindingName = 'name'; chart.itemsSource = app.getData(); chart.endUpdate(); // innerRadius - initialize InputNumber's properties innerRadius.min = 0; innerRadius.max = 1; innerRadius.step = 0.1; innerRadius.format = 'n'; innerRadius.valueChanged.addHandler(function (sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } chart.innerRadius = sender.value; }); // offset - initialize InputNumber's properties offset.min = 0; offset.max = 1; offset.step = 0.1; offset.format = 'n'; offset.valueChanged.addHandler(function (sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } chart.offset = sender.value; }); // startAngle - initialize InputNumber's properties startAngle.min = -360; startAngle.max = 360; startAngle.step = 45; startAngle.valueChanged.addHandler(function (sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } chart.startAngle = sender.value; }); // palettes - initialize Menu's properties palettes.itemsSource = app.palettes; palettes.selectedValue = 'standard'; palettes.textChanged.addHandler(function (sender) { if (!sender.selectedValue) return; chart.palette = wijmo.chart.Palettes[app.palettes[sender.selectedIndex]]; app.updateMenuHeader(sender, '<b>Palette</b>: ', sender.text); }); app.updateMenuHeader(palettes, '<b>Palette</b>: ', palettes.text); // change event for reversed checkbox reversed.addEventListener('change', function() { chart.reversed = this.checked; });

結果(ライブ):

凡例とタイトル

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

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

<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>
// create controls var chart = new wijmo.chart.FlexPie('#ltChart'), menu = new wijmo.input.Menu('#ltLegPos'), header = document.getElementById('ltHeader'), footer = document.getElementById('ltFooter'); // initialize FlexPie's properties chart.beginUpdate(); chart.binding = 'value'; chart.bindingName = 'name'; chart.itemsSource = app.getData(); chart.header = 'Fruit By Value'; chart.footer = '2014 GrapeCity, inc.'; chart.endUpdate(); // header input header.value = chart.header; header.addEventListener('input', function () { chart.header = this.value; }); // footer input footer.value = chart.footer; footer.addEventListener('input', function () { chart.footer = this.value; }); // legend.position - initialize Menu's properties menu.selectedIndexChanged.addHandler(function (sender, args) { if (!sender.selectedValue) return; chart.legend.position = sender.selectedValue; app.updateMenuHeader(sender, '<b>凡例の位置</b>: ', sender.text); }); menu.selectedValue = 'Right';

結果(ライブ):

選択

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

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

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

<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 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"> アニメーション表示 </label> </div> </div> </div> </div>
// create controls var chart = new wijmo.chart.FlexPie('#selChart'), inputNumber = new wijmo.input.InputNumber('#selItemOffset'), menu = new wijmo.input.Menu('#selItemPos'), check = document.getElementById('selAnimated'); // initialize FlexPie's properties chart.beginUpdate(); chart.binding = 'value'; chart.bindingName = 'name'; chart.itemsSource = app.getData(); chart.isAnimated = true; chart.selectionMode = 'Point'; chart.selectedItemPosition = 'Top'; chart.endUpdate(); // selectedItemOffset - initialize InputNumber's properties inputNumber.min = 0; inputNumber.max = 0.5; inputNumber.step = 0.1; inputNumber.format = 'n'; inputNumber.valueChanged.addHandler(function(sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } chart.selectedItemOffset = sender.value; }); // selectedItemPosition - initialize Menu's properties menu.selectedIndexChanged.addHandler(function(sender) { if (!sender.selectedValue) return; chart.selectedItemPosition = sender.selectedValue; app.updateMenuHeader(sender, '<b>選択項目の位置</b>: ', sender.text); }); menu.selectedValue = 'Top'; // isAnimated - initialize checkbox properties check.checked = true; check.addEventListener('change', function() { chart.isAnimated = this.checked; });

結果(ライブ):

テーマ

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

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

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

<div id="themeChart" class="custom-pie-chart"></div>
// create controls var chart = new wijmo.chart.FlexPie('#themeChart'); // initialize FlexPie's properties chart.beginUpdate(); chart.binding = 'value'; chart.bindingName = 'name'; chart.itemsSource = app.getData(); chart.header = 'Header'; chart.footer = 'Footer'; chart.endUpdate();
.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; }

結果(ライブ):