Wijmo 5

FlexRadar 101

此示例显示了如何开始使用Wijmo的FlexRadar控件。

入门

在JavaScript应用程序中开始使用FlexRadar控件的步骤：

  1. 增加Wijmo引用
  2. 增加标记到服务作为Wijmo控件的host。
  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/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; });

Result (live):

基本功能

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="Chart Type" 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="Stacking" 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">Start Angle</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">Total Angle</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"> 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"> Show DataLabel? </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}' : ''; });

Result (live):

Line LineSymbols Area Scatter Column
None Stacked Stacked100pc

极坐标图基本功能

如果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="Chart Type" 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="Stacking" 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">Start Angle</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">Total Angle</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"> 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; } });

Result (live):

Line LineSymbols Area Scatter
None Stacked Stacked100pc

动画

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="Chart Type" 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="Animation Mode" 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="Easing" 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"> Is Polar Chart? </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(); });

Result (live):

Line LineSymbols Area Scatter Column
Point Series All
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