Wijmo 5

FlexRadar入門

このページでは、Wijmo FlexRadarコントロールを使用する基本的な方法を示します。

はじめに

JavaScriptアプリケーションでFlexRadarコントロールを使用する手順。

  1. Wijmoへの参照を追加します。
  2. Wijmoコントロールをホストするマークアップを追加します。
  3. JavaScriptでWijmoコントロールを初期化します。
  4. (オプション)CSSを追加して、inputコントロールの外観をカスタマイズします。
<!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.chart.radar.js" type="text/javascript"></script> <script src="scripts/wijmo.chart.animation.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 FlexRadar directive --> <wj-flex-radar items-source="itemsSource" binding-x="country"> <wj-flex-radar-series name="Sales" binding="sales"></wj-flex-radar-series> <wj-flex-radar-series name="Downloads" binding="downloads"></wj-flex-radar-series> <wj-flex-chart-axis wj-property="axisY" min="0" max="100"></wj-flex-chart-axis> </wj-flex-radar> </body> </html>
// declare app module var app = angular.module('app', ['wj']); // controller provides data app.controller('simpleCtrl', function appCtrl($scope) { var data = [], countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','); // populate itemsSource for (var i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.ceil(Math.random() * 80) + 20, sales: Math.ceil(Math.random() * 80) + 20 }); } $scope.itemsSource = data; });

結果(ライブ):

基本機能

FlexRadarコントロールには、そのレイアウトと外観をカスタマイズするためのいくつかの基本的なプロパティがあります。

次の例は、これらのプロパティを変更するとどうなるかを示します。

<wj-flex-radar control="chart" items-source="itemsSource" binding-x="country" chart-type="{{ chartType }}" total-angle="{{ totalAngle }}" start-angle="{{ startAngle }}" stacking="{{ stacking }}" reversed="{{ reversed }}"> <wj-flex-radar-series name="Sales" binding="sales"><wj-flex-radar-series> <wj-flex-radar-series name="Downloads" binding="downloads"></wj-flex-radar-series> </wj-flex-radar> <div class="form-horizontal"> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <wj-menu header="種類" value="chartType"> <wj-menu-item value="'Line'">Line</wj-menu-item> <wj-menu-item value="'LineSymbols'">LineSymbols</wj-menu-item> <wj-menu-item value="'Area'">Area</wj-menu-item> <wj-menu-item value="'Scatter'">Scatter</wj-menu-item> <wj-menu-item value="'Column'">Column</wj-menu-item> </wj-menu> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <wj-menu header="積み上げ" value="stacking"> <wj-menu-item value="'None'">None</wj-menu-item> <wj-menu-item value="'Stacked'">Stacked</wj-menu-item> <wj-menu-item value="'Stacked100pc'">Stacked100pc</wj-menu-item> </wj-menu> </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="0" max="360" step="60"> </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="inputTotalAngle" value="ctx.totalAngle" min="90" max="360" step="90"> </wj-input-number> </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 class="form-group"> <div class="col-md-offset-3 col-md-9"> <div class="checkbox"> <label> <input type="checkbox" ng-model="showDataLabel"> データラベルの表示 </label> </div> </div> </div> </div>
$scope.itemsSource = dataSvc.getData(); $scope.chart = null; $scope.chartType = 'Line'; $scope.inputStartAngle = null; $scope.inputTotalAngle = null; $scope.startAngle = 0; $scope.totalAngle = 360; $scope.stacking = 'None'; $scope.reversed = false; $scope.showDataLabel = false; $scope.palette = 'standard'; $scope.ctx = { startAngle: 0, totalAngle: 360 }; $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.$watch('ctx.totalAngle', function () { var totalAngle = $scope.inputTotalAngle, val = $scope.ctx.totalAngle; if (totalAngle != null) { if (val < totalAngle.min || val > totalAngle.max) { return; } $scope.totalAngle = val; } }); $scope.$watch('showDataLabel', function () { var showDataLabel = $scope.showDataLabel; $scope.chart.dataLabel.content = showDataLabel ? '{y}' : ''; });

結果(ライブ):

折れ線 折れ線記号 散布図 縦棒
なし 積み上げ 100%積み上げ

ポーラチャートの基本機能

xValuesが数値の場合は、FlexRadarコントロールをポーラチャートにすることができます。これには、レイアウトと外観をカスタマイズするためのいくつかの基本的なプロパティがあります。

次の例は、これらのプロパティを変更するとどうなるかを示します。

<wj-flex-radar control="chart" items-source="itemsSource" binding-x="longitude" chart-type="{{ chartType }}" total-angle="{{ totalAngle }}" start-angle="{{ startAngle }}" stacking="{{ stacking }}" reversed="{{ reversed }}"> <wj-flex-radar-series name="Latitude1" binding="latitude1"><wj-flex-radar-series> <wj-flex-radar-series name="Latitude2" binding="latitude2"></wj-flex-radar-series> </wj-flex-radar> <div class="form-horizontal"> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <wj-menu header="種類" value="chartType"> <wj-menu-item value="'Line'">Line</wj-menu-item> <wj-menu-item value="'LineSymbols'">LineSymbols</wj-menu-item> <wj-menu-item value="'Area'">Area</wj-menu-item> <wj-menu-item value="'Scatter'">Scatter</wj-menu-item> </wj-menu> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <wj-menu header="積み上げ" value="stacking"> <wj-menu-item value="'None'">None</wj-menu-item> <wj-menu-item value="'Stacked'">Stacked</wj-menu-item> <wj-menu-item value="'Stacked100pc'">Stacked100pc</wj-menu-item> </wj-menu> </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="0" max="360" step="60"> </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="inputTotalAngle" value="ctx.totalAngle" min="90" max="360" step="90"> </wj-input-number> </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.getPolarData(); $scope.chart = null; $scope.chartType = 'Line'; $scope.inputStartAngle = null; $scope.inputTotalAngle = null; $scope.startAngle = 0; $scope.totalAngle = 360; $scope.stacking = 'None'; $scope.reversed = false; $scope.palette = 'standard'; $scope.ctx = { startAngle: 0, totalAngle: 360 }; $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.$watch('ctx.totalAngle', function () { var totalAngle = $scope.inputTotalAngle, val = $scope.ctx.totalAngle; if (totalAngle != null) { if (val < totalAngle.min || val > totalAngle.max) { return; } $scope.totalAngle = val; } });

結果(ライブ):

折れ線 折れ線記号 散布図
なし 積み上げ 100%積み上げ

アニメーション

FlexRadarコントロールは、ChartAnimationと組み合わせて機能します。

ChartAnimationのanimationModeプロパティを設定することにより、FlexRadarコントロールにさまざまなアニメーションモードを使用できます。

<wj-flex-radar control="chart" items-source="itemsSource" binding-x="{{ bindingX }}" chart-type="{{ chartType }}"> <wj-flex-radar-series name="Sales" binding="sales"><wj-flex-radar-series> <wj-flex-radar-series name="Downloads" binding="downloads"></wj-flex-radar-series> <wj-flex-chart-axis wj-property="axisY" min="0" max="100"></wj-flex-chart-axis> <wj-flex-chart-animation animation-mode="{{animationMode}}" easing="{{easing}}" duration="{{duration}}"></wj-flex-chart-animation> </wj-flex-radar> <div class="form-horizontal"> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <wj-menu header="種類" value="chartType"> <wj-menu-item value="'Line'">Line</wj-menu-item> <wj-menu-item value="'LineSymbols'">LineSymbols</wj-menu-item> <wj-menu-item value="'Area'">Area</wj-menu-item> <wj-menu-item value="'Scatter'">Scatter</wj-menu-item> <wj-menu-item value="'Column'">Column</wj-menu-item> </wj-menu> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <wj-menu header="アニメーションモード" value="animationMode"> <wj-menu-item value="'Point'">Point</wj-menu-item> <wj-menu-item value="'Series'">Series</wj-menu-item> <wj-menu-item value="'All'">All</wj-menu-item> </wj-menu> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <wj-menu header="イージング" value="easing"> <wj-menu-item value="'Linear'">Linear</wj-menu-item> <wj-menu-item value="'Swing'">Swing</wj-menu-item> <wj-menu-item value="'EaseInQuad'">EaseInQuad</wj-menu-item> <wj-menu-item value="'EaseOutQuad'">EaseOutQuad</wj-menu-item> <wj-menu-item value="'EaseInOutQuad'">EaseInOutQuad</wj-menu-item> <wj-menu-item value="'EaseInCubic'">EaseInCubic</wj-menu-item> <wj-menu-item value="'EaseOutCubic'">EaseOutCubic</wj-menu-item> <wj-menu-item value="'EaseInOutCubic'">EaseInOutCubic</wj-menu-item> <wj-menu-item value="'EaseInQuart'">EaseInQuart</wj-menu-item> <wj-menu-item value="'EaseOutQuart'">EaseOutQuart</wj-menu-item> <wj-menu-item value="'EaseInOutQuart'">EaseInOutQuart</wj-menu-item> <wj-menu-item value="'EaseInQuint'">EaseInQuint</wj-menu-item> <wj-menu-item value="'EaseOutQuint'">EaseOutQuint</wj-menu-item> <wj-menu-item value="'EaseInOutQuint'">EaseInOutQuint</wj-menu-item> <wj-menu-item value="'EaseInSine'">EaseInSine</wj-menu-item> <wj-menu-item value="'EaseOutSine'">EaseOutSine</wj-menu-item> <wj-menu-item value="'EaseInOutSine'">EaseInOutSine</wj-menu-item> <wj-menu-item value="'EaseInExpo'">EaseInExpo</wj-menu-item> <wj-menu-item value="'EaseOutExpo'">EaseOutExpo</wj-menu-item> <wj-menu-item value="'EaseInOutExpo'">EaseInOutExpo</wj-menu-item> <wj-menu-item value="'EaseInCirc'">EaseInCirc</wj-menu-item> <wj-menu-item value="'EaseOutCirc'">EaseOutCirc</wj-menu-item> <wj-menu-item value="'EaseInOutCirc'">EaseInOutCirc</wj-menu-item> <wj-menu-item value="'EaseInBack'">EaseInBack</wj-menu-item> <wj-menu-item value="'EaseOutBack'">EaseOutBack</wj-menu-item> <wj-menu-item value="'EaseInOutBack'">EaseInOutBack</wj-menu-item> <wj-menu-item value="'EaseInBounce'">EaseInBounce</wj-menu-item> <wj-menu-item value="'EaseOutBounce'">EaseOutBounce</wj-menu-item> <wj-menu-item value="'EaseInOutBounce'">EaseInOutBounce</wj-menu-item> <wj-menu-item value="'EaseInElastic'">EaseInElastic</wj-menu-item> <wj-menu-item value="'EaseOutElastic'">EaseOutElastic</wj-menu-item> <wj-menu-item value="'EaseInOutElastic'">EaseInOutElastic</wj-menu-item> </wj-menu> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Duration</label> <div class="col-md-9"> <wj-input-number control="inputDuration" value="iptDuration" min="200" max="50000" step="200"> </wj-input-number> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div class="checkbox"> <label> <input type="checkbox" ng-model="isPolarChart"> ポーラチャート </label> </div> </div> </div> </div>
$scope.itemsSource = dataSvc.getData(); $scope.chart = null; $scope.bindingX = 'country'; $scope.chartType = 'Line'; $scope.animationMode = 'Point'; $scope.easing = 'Swing'; $scope.duration = 400; $scope.iptDuration = 400; $scope.inputDuration = null; $scope.isPolarChart = false; $scope.$watch('iptDuration', function () { var duration = $scope.inputDuration, val = $scope.iptDuration; if (duration != null) { if (val < duration.min || val > duration.max) { return; } $scope.duration = val; $scope.chart.refresh(); } }); $scope.$watch('easing', function () { if ($scope.chart) { $scope.chart.refresh(); } }); $scope.$watch('animationMode', function () { if ($scope.chart) { $scope.chart.refresh(); } }); $scope.$watch('isPolarChart', function () { var isPolar = $scope.isPolarChart, chart = $scope.chart; if (!chart) { return; } chart.beginUpdate(); if (isPolar) { $scope.itemsSource = dataSvc.getPolarData(); $scope.bindingX = 'longitude'; chart.series[0].binding = 'latitude1'; chart.series[0].name = 'Latitude1'; chart.series[1].binding = 'latitude2'; chart.series[1].name = 'Latitude2'; } else { $scope.itemsSource = dataSvc.getData(); $scope.bindingX = 'country'; chart.series[0].binding = 'sales'; chart.series[0].name = 'Sales'; chart.series[1].binding = 'downloads'; chart.series[1].name = 'Downloads'; } chart.endUpdate(); });

結果(ライブ):

折れ線 折れ線記号 散布図 縦棒
ポイント シリーズ すべて
Linear Swing EaseInQuad EaseOutQuad EaseInOutQuad EaseInCubic EaseOutCubic EaseInOutCubic EaseInQuart EaseOutQuart EaseInOutQuart EaseInQuint EaseOutQuint EaseInOutQuint EaseInSine EaseOutSine EaseInOutSine EaseInExpo EaseOutExpo EaseInOutExpo EaseInCirc EaseOutCirc EaseInOutCirc EaseInBack EaseOutBack EaseInOutBack EaseInBounce EaseOutBounce EaseInOutBounce EaseInElastic EaseOutElastic EaseInOutElastic