FlexChart入門

はじめに

FlexChartをAngularJSアプリケーションで使用する手順は以下のとおりです。

  1. AngularJS、Wijmo、およびWijmoのAngularJSディレクティブへの参照を追加します。
  2. appモジュールにWijmo 5ディレクティブを含めます。
    var app = angular.module('app', ['wj']);
  3. データとロジックを提供するコントローラーを追加します。
  4. FlexChartをページに追加してデータにバインドします。
  5. チャートの外観をカスタマイズするCSSを追加します。
<html> <head> <link rel="stylesheet" href="css/bootstrap.css"/> <link rel="stylesheet" href="css/wijmo.css"/> <link href="css/app.css" rel="stylesheet"/> <script src="scripts/angular.js"></script> <script src="scripts/wijmo.js"></script> <script src="scripts/wijmo.chart.js"></script> <script src="scripts/wijmo.angular.js"></script> <script src="scripts/app.js"></script> </head> <body ng-app="app" ng-controller="appCtrl"> <!-- this is the chart --> <wj-flex-chart items-source="data" binding-x="country"> <wj-flex-chart-series name="Sales" binding="sales"> </wj-flex-chart-series> <wj-flex-chart-series name="Expenses" binding="expenses"> </wj-flex-chart-series> <wj-flex-chart-series name="Downloads" binding="downloads"> </wj-flex-chart-series> </wj-flex-chart> </body> </html>
// declare app module var app = angular.module('app', ['wj']); // app controller provides data app.controller('appCtrl', function appCtrl($scope) { // generate some random data var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (var i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // add data array to scope $scope.data = data; });
/* set default chart style */ .wj-flexchart { height: 400px; background-color: white; box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75); padding: 8px; margin-bottom: 12px; }

結果(ライブ):

チャートタイプ

FlexChartコントロールでは、以下の3つのプロパティを使用してチャートタイプをカスタマイズできます。

  1. chartType: すべての系列に使用するデフォルトのチャートタイプを選択します。これは個々の系列でオーバーライドできます。
  2. stacking: 系列を個別にプロットするか、積み重ねるか、または合計が100%になるように積み重ねるかを指定します。
  3. rotated: X軸が縦、Y軸が横になるようにXとYを入れ替えます。

以下の例で、これらのプロパティを変更したときにどのようになるかを確認できます。

<wj-flex-chart items-source="data" chart-type="{{chartProps.chartType}}" stacking="{{chartProps.stacking}}" rotated="{{chartProps.rotated}}" binding-x="country"> <wj-flex-chart-series name="Sales" binding="sales"> </wj-flex-chart-series> <wj-flex-chart-series name="Expenses" binding="expenses"> </wj-flex-chart-series> <wj-flex-chart-series name="Downloads" binding="downloads"> </wj-flex-chart-series> </wj-flex-chart> <wj-menu value="chartProps.chartType" header="チャートタイプ" > <wj-menu-item value="0">Column</wj-menu-item> <wj-menu-item value="1">Bar</wj-menu-item> <wj-menu-item value="2">Scatter</wj-menu-item> <wj-menu-item value="3">Line</wj-menu-item> <wj-menu-item value="4">LineSymbols</wj-menu-item> <wj-menu-item value="5">Area</wj-menu-item> <wj-menu-item value="9">Spline</wj-menu-item> <wj-menu-item value="10">SplineSymbols</wj-menu-item> <wj-menu-item value="11">SplineArea</wj-menu-item> </wj-menu> <wj-menu value="chartProps.stacking" header="積み上げ" > <wj-menu-item value="0">None</wj-menu-item> <wj-menu-item value="1">Stacked</wj-menu-item> <wj-menu-item value="2">Stacked 100%</wj-menu-item> </wj-menu> <wj-menu value="chartProps.rotated" header="回転" > <wj-menu-item value="false">False</wj-menu-item> <wj-menu-item value="true">True</wj-menu-item> </wj-menu>
// add chart properties to scope $scope.chartProps = { chartType: wijmo.chart.ChartType.Column, stacking: wijmo.chart.Stacking.None, rotated: false };

結果(ライブ):

縦棒 横棒 散布図 折れ線 折れ線記号 スプライン スプライン記号 スプライン面 なし 積み上げ 100%積み上げ False True

ファンネルチャート

以下の例では、ファンネルチャートを作成してカスタマイズする方法を示します。

<wj-flex-chart control="funnelChart" items-source="funnelData" chart-type="Funnel" binding-x="country"> <wj-flex-chart-series name="Sales" binding="sales"></wj-flex-chart-series> </wj-flex-chart> <dl class="dl-horizontal"> <dt>ネックの幅</dt> <dd> <div id="funnelNeckWidth"></div> <wj-input-number control="inputNeckWidth" value="neckWidth" min="0" max="1" step=".1"> </wj-input-number> </dd> </dl> <dl class="dl-horizontal"> <dt>ネックの高さ</dt> <dd> <div id="funnelNeckHeight"></div> <wj-input-number control="inputNeckHeight" value="neckHeight" min="0" max="1" step=".1"> </wj-input-number> </dd> </dl> <dl class="dl-horizontal"> <dt></dt> <dd> <wj-menu header="ファンネルタイプ: <b>{{ funnelType }}</b>" item-clicked="funnelTypeChanged(s, e)"> <wj-menu-item value="'default'">Default</wj-menu-item> <wj-menu-item value="'rectangle'">Rectangle</wj-menu-item> </wj-menu> </dd> </dl>
$scope.funnelChart = null; $scope.inputNeckWidth = null; $scope.inputNeckHeight = null; $scope.neckWidth = 0.2; $scope.neckHeight = 0.2; $scope.funnelType = 'default'; $scope.$watch('funnelChart', function () { var funnelChart = $scope.funnelChart; if (funnelChart != null) { funnelChart.options = { funnel: { neckWidth: 0.2, neckHeight: 0.2, type: 'default' } }; funnelChart.dataLabel.content = '{y}'; } }); $scope.$watch('neckWidth', function () { var neckWidth = $scope.inputNeckWidth, val = $scope.neckWidth; if (neckWidth != null) { if (val < neckWidth.min || val > neckWidth.max) { return; } $scope.funnelChart.options.funnel.neckWidth = val; $scope.funnelChart.refresh(true); } }); $scope.$watch('neckHeight', function () { var neckHeight = $scope.inputNeckHeight, val = $scope.neckHeight; if (neckHeight != null) { if (val < neckHeight.min || val > neckHeight.max) { return; } $scope.funnelChart.options.funnel.neckHeight = val; $scope.funnelChart.refresh(true); } }); $scope.funnelTypeChanged = function (sender) { $scope.funnelChart.options.funnel.type = sender.selectedValue; $scope.funnelChart.refresh(true); };

結果(ライブ):

ネックの幅
ネックの高さ
既定 長方形

複合チャート

系列自体のchartTypeプロパティを設定することで、チャート系列ごとに異なるチャートタイプを使用できます。これにより、チャートのデフォルトチャートタイプがオーバーライドされます。

以下の例では、チャートのchartTypeプロパティはColumnに設定されていますが、Downloads系列ではこれをオーバーライドしてLineAndSymbolチャートタイプを使用しています。

<wj-flex-chart items-source="data" chart-type="Column" binding-x="country"> <wj-flex-chart-series name="Sales" binding="sales"></wj-flex-chart-series> <wj-flex-chart-series name="Expenses" binding="expenses"></wj-flex-chart-series> <wj-flex-chart-series name="Downloads" binding="downloads" chart-type="LineSymbols"></wj-flex-chart-series> </wj-flex-chart>

結果(ライブ):

凡例とタイトル

チャート凡例の外観をカスタマイズするには、legendプロパティを使用します。チャートにタイトルを追加するには、headerfooter、および軸のtitleプロパティを使用します。

凡例とタイトルのスタイルはCSSを使用して設定できます。以下の[CSS]タブに、凡例とタイトルの外観のカスタマイズに使用されるルールを示します。これらはSVG要素なので、"color"ではなく"fill"などのCSS属性を使用する必要があります。

<wj-flex-chart items-source="data" binding-x="country" header="{{chartProps.header}}" footer="{{chartProps.footer}}"> <wj-flex-chart-legend position="{{chartProps.legendPosition}}"> </wj-flex-chart-legend> <wj-flex-chart-axis wj-property="axisX" title="{{chartProps.titleX}}"> </wj-flex-chart-axis> <wj-flex-chart-axis wj-property="axisY" title="{{chartProps.titleY}}"> </wj-flex-chart-axis> <wj-flex-chart-series name="Sales" binding="sales"></wj-flex-chart-series> <wj-flex-chart-series name="Expenses" binding="expenses"></wj-flex-chart-series> <wj-flex-chart-series name="Downloads" binding="downloads"></wj-flex-chart-series> </wj-flex-chart> <dl class="dl-horizontal"> <dt>Header</dt><dd><input ng-model="chartProps.header" class="form-control"/></dd> <dt>Footer</dt><dd><input ng-model="chartProps.footer" class="form-control"/></dd> <dt>X軸タイトル</dt><dd><input ng-model="chartProps.titleX" class="form-control"/></dd> <dt>Y軸タイトル</dt><dd><input ng-model="chartProps.titleY" class="form-control"/></dd> <dt></dt> <dd> <wj-menu value="chartProps.legendPosition" header="凡例" > <wj-menu-item value="0">None</wj-menu-item> <wj-menu-item value="1">Left</wj-menu-item> <wj-menu-item value="2">Top</wj-menu-item> <wj-menu-item value="3">Right</wj-menu-item> <wj-menu-item value="4">Bottom</wj-menu-item> </wj-menu> </dd> </dl>
// add chart properties to scope $scope.chartProps = { chartType: wijmo.chart.ChartType.Column, legendPosition: wijmo.chart.Position.Right, stacking: wijmo.chart.Stacking.None, rotated: false, header: 'Sample Chart', footer: 'copyright (c) ComponentOne', titleX: 'country', titleY: 'amount' };
.wj-flexchart .wj-title { font-weight: bold; } .wj-flexchart .wj-header .wj-title { font-size: 18pt; fill: #80044d; } .wj-flexchart .wj-footer .wj-title { fill: #80044d; } .wj-flexchart .wj-axis-x .wj-title, .wj-flexchart .wj-axis-y .wj-title { font-style: italic; }

結果(ライブ):

ヘッダ
フッタ
X軸タイトル
Y軸タイトル
なし

ツールチップ

FlexChartにはツールチップのサポートが組み込まれています。デフォルトでは、ユーザーがデータポイントにタッチするかマウスを合わせると、ツールチップが表示されます。

ツールチップの内容はテンプレートを使用して生成されます。テンプレートには以下のパラメーターを含めることができます。

デフォルトでは、ツールチップテンプレートは次のように設定されており<b>{seriesName}</b><br/>{x} {y}、上のチャートでこのデフォルトツールチップがどのように表示されるかを確認できます。この例では、ツールチップテンプレートは次のように設定されており<b>{seriesName}</b> <img src='resources/{x}.png'/><br/>{y}、国名が国旗に置き換えられています。

チャートのツールチップを無効にするには、テンプレートを空の文字列に設定します。

<wj-flex-chart items-source="data" tooltip-content="<img src='resources/{x}.png'/> <b>{seriesName}</b><br/>{y}" binding-x="country"> <wj-flex-chart-series name="Sales" binding="sales"></wj-flex-chart-series> <wj-flex-chart-series name="Expenses" binding="expenses"></wj-flex-chart-series> <wj-flex-chart-series name="Downloads" binding="downloads"></wj-flex-chart-series> </wj-flex-chart>

結果(ライブ):

系列のスタイルの設定

FlexChartでは、デフォルトパレットに基づいて各系列の色が自動的に選択されます。このパレットは、paletteプロパティを設定することでオーバーライドできます。 また、系列のstyleオブジェクトをSVGスタイル設定属性(fillstrokestrokeThicknessなど)を指定するオブジェクトに設定することによってデフォルト設定をオーバーライドすることもできます。

Series.styleプロパティは、Wijmoのスタイル設定はすべてCSSを通じてなされるという原則の例外です。この例外は、チャートには動的な系列を含むものが多いという事実を反映しています。動的な系列のスタイルを事前に設定することは不可能です。たとえば、株価チャートには、アプリケーションの実行中にユーザーが選択した系列が表示されます。

この例のチャートでは、styleプロパティとsymbolStyleプロパティを使用して各系列のスタイル属性を選択しています。

<wj-flex-chart items-source="data" binding-x="country"> <wj-flex-chart-series name="Sales" binding="sales" ng-attr-style="{fill:'green', stroke:'darkgreen', 'stroke-width': '1'}"></wj-flex-chart-series> <wj-flex-chart-series name="Expenses" binding="expenses" ng-attr-style="{fill:'red', stroke:'darkred', 'stroke-width': '1'}"></wj-flex-chart-series> <wj-flex-chart-series name="Downloads" binding="downloads" chart-type="'LineSymbols'" ng-attr-style="{ stroke:'orange', 'stroke-width': '5'}" ng-attr-symbol-style="{fill:'gold', stroke:'gold' }"></wj-flex-chart-series> </wj-flex-chart>

結果(ライブ):

軸のカスタマイズ

チャートの軸をカスタマイズするには、範囲(最小値と最大値)、ラベル書式、目盛間隔、罫線などの軸プロパティを使用します。

Axisクラスには、各機能をオン/オフできるブール型プロパティがあります(axisLinelabelsmajorTickMarksmajorGrid)。オンにした機能の外観はCSSを使用してスタイル設定できます。

<wj-flex-chart items-source="data" binding-x="country"> <wj-flex-chart-axis wj-property="axisX" axis-line="true" major-grid="true"> </wj-flex-chart-axis> <wj-flex-chart-axis wj-property="axisY" format="c0" max="10000" major-unit="2000" axis-line="true" major-grid="true"> </wj-flex-chart-axis> <wj-flex-chart-series name="Sales" binding="sales"></wj-flex-chart-series> <wj-flex-chart-series name="Expenses" binding="expenses"></wj-flex-chart-series> </wj-flex-chart>

結果(ライブ):

テーマ

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

チャートの外観をカスタマイズするには、スタイル設定する要素を調べて、それらの要素に適用するCSSルールを作成します。

たとえば、IEまたはChromeでいずれかのX軸ラベルを右クリックすると、それが"wj-label"クラスを持つ要素であることがわかります。この要素は"wj-axis-x"クラスを持つ要素に含まれており、さらにその要素は"wj-flexchart"クラスを持つ最上位コントロール要素に含まれています。この例の最初のCSSルールは、この情報を使用してXラベルをカスタマイズします。このルールのセレクターには、親要素が"wj-flexchart"と"custom-flex-chart"の両方のクラスを持たなければならないという要件が追加されています。これがなければ、このルールはページ上のすべてのチャートに適用されます。

<wj-flex-chart class="custom-flex-chart" items-source="data" binding-x="country"> <wj-flex-chart-series name="Sales" binding="sales"></wj-flex-chart-series> <wj-flex-chart-series name="Expenses" binding="expenses"></wj-flex-chart-series> <wj-flex-chart-series name="Downloads" binding="downloads"></wj-flex-chart-series> </wj-flex-chart>
/* custom chart theme */ .custom-flex-chart.wj-flexchart .wj-axis-x .wj-label { font-family: Courier New, Courier, monospace; font-weight: bold; } .custom-flex-chart.wj-flexchart .wj-legend .wj-label { font-family: Courier New, Courier, monospace; font-weight: bold; } .custom-flex-chart.wj-flexchart .wj-legend > rect { fill: #f8f8f8; stroke: #c0c0c0; } .custom-flex-chart.wj-flexchart .wj-plot-area > rect { fill: #f8f8f8; stroke: #c0c0c0; }

結果(ライブ):

選択モード

FlexChartでは、系列またはデータポイントをクリックまたはタッチすることで、それらを選択できます。系列単位またはデータポイント単位で選択できるようにするか、あるいはいずれも選択できないようにするかを指定するには、selectionModeプロパティを使用します(選択はデフォルトではオフになっています)。

selectionModeプロパティをSeriesまたはPointに設定すると、ユーザーがマウスをクリックしたときにSelectionプロパティが更新され、選択されたチャート要素に"wj-state-selected"クラスが適用されます。

Selectionプロパティは現在選択されている系列を返します。現在選択されているデータポイントを取得するには、この例で示すように、Series.collectionView.currentItemプロパティを使用して、選択された系列内の現在選択されている項目を取得します。

<wj-flex-chart items-source="data" binding-x="country" tooltip-content="" chart-type="{{chartProps.chartType}}" selection-mode="{{chartProps.selectionMode}}" selection="chartProps.selection"> <wj-flex-chart-series name="Sales" binding="sales"></wj-flex-chart-series> <wj-flex-chart-series name="Expenses" binding="expenses"></wj-flex-chart-series> <wj-flex-chart-series name="Downloads" binding="downloads"></wj-flex-chart-series> </wj-flex-chart> <div ng-hide="chartProps.selectionMode == 0 || chartProps.selection == null"> <h4> 現在の選択</h4> <p> 系列: <b>{​{chartProps.selection.name}}</b></p> <dl class="dl-horizontal" ng-hide="chartProps.selectionMode != 2 || chartProps.selection.collectionView.currentItem == null"> <dt>Country</dt><dd>{​{chartProps.selection.collectionView.currentItem.country}}</dd> <dt>Sales</dt><dd>{​{chartProps.selection.collectionView.currentItem.sales | number:2}}</dd> <dt>Expenses</dt><dd>{​{chartProps.selection.collectionView.currentItem.expenses | number:2}}</dd> <dt>Downloads</dt><dd>{​{chartProps.selection.collectionView.currentItem.downloads | number:0}}</dd> </dl> </div>
// add chart properties to scope $scope.chartProps = { chartType: wijmo.chart.ChartType.Column, stacking: wijmo.chart.Stacking.None, legendPosition: wijmo.chart.Position.Right, rotated: false, header: 'Sample Chart', footer: 'copyright (c) ComponentOne', titleX: 'country', titleY: 'amount', selectionMode: wijmo.chart.SelectionMode.Series, selection: null };

結果(ライブ):

なし 系列 縦棒 横棒 散布図 折れ線 折れ線記号 スプライン スプライン記号 スプライン面

現在の選択

系列: {{chartProps.selection.name}}

Country
{{chartProps.selection.collectionView.currentItem.country}}
Sales
{{chartProps.selection.collectionView.currentItem.sales | number:2}}
Expenses
{{chartProps.selection.collectionView.currentItem.expenses | number:2}}
Downloads
{{chartProps.selection.collectionView.currentItem.downloads | number:0}}

系列の表示/非表示

Seriesクラスのvisibilityプロパティを使用して、系列をチャートと凡例の両方に表示するか、凡例のみに表示するか、表示しないかを指定できます。

このサンプルは、visibilityプロパティを使用して、以下の2通りの方法で系列の表示/非表示を切り替える方法を示します。

  1. 凡例エントリをクリックする:
    チャートディレクティブによってチャートのoption.legendToggleプロパティがtrueに設定されています。そのため、系列の凡例エントリをクリックすると、その系列のvisibilityプロパティが切り替わります。
  2. チェックボックスを使用する:
    このページでは、Angularディレクティブを使用して、入力コントロールを各系列のvisibilityプロパティに直接バインドしています。
<wj-flex-chart items-source="data" legend-toggle="true" control="toggleChart"> <wj-flex-chart-series name="Sales" binding="sales"></wj-flex-chart-series> <wj-flex-chart-series name="Expenses" binding="expenses"></wj-flex-chart-series> <wj-flex-chart-series name="Downloads" binding="downloads"></wj-flex-chart-series> </wj-flex-chart> Sales <input type="checkbox" ng-model="toggleChart.series[0].visibility" ng-true-value="0" ng-false-value="2" ng-checked="true"/><br /> Expenses <input type="checkbox" ng-model="toggleChart.series[1].visibility" ng-true-value="0" ng-false-value="2" ng-checked="true"/><br /> Downloads <input type="checkbox" ng-model="toggleChart.series[2].visibility" ng-true-value="0" ng-false-value="2" ng-checked="true"/>
// toggle series visibility when user clicks on the legend // (note: this code is in the chart directive) control.hostElement.addEventListener('click', function (e) { if (scope.seriesToggle == true) { var ht = control.hitTest(e); if (ht && ht.chartElement == wijmo.chart.ChartElement.Legend && ht.series) { if (ht.series.visibility == wijmo.chart.SeriesVisibility.Legend) { ht.series.visibility = wijmo.chart.SeriesVisibility.Visible; } else { ht.series.visibility = wijmo.chart.SeriesVisibility.Legend; } } } });

結果(ライブ):

Sales
Expenses
Downloads

グラデーションの色

FlexChartはグラデーションの色をサポートしています。

グラデーション記述子は、次の形式の式です。<type>(<coords>)<colors>[:<offset>[:<opacity>]][-<colors>[:<offset>[:<opacity>]]]-<colors>[:<offset>[:<opacity>]] <type>はlinearまたはradialのいずれかの値を設定できます。 大文字のLまたはR文字は、SVGのsurfaceからの絶対座標オフセットを示します。 小文字のlまたはrの文字は、グラデーションが適用される要素を基準に計算された座標を示します。 座標は、x1y1x2y2で線形グラデーションベクトルを指定して、cxcyrとオプションのfxfyfrで円の中心から離れた焦点を指定します。 <colors>をダッシュ区切りのCSSカラー値のリストとして指定します。 各色の後に、カスタムのオフセットと不透明度の値をコロン文字で区切って指定することができます。

線形グラデーション形式の例:

'l(0,0,1,0)#ff0000-#00ff00-#0000ff', 'L(0,0,300,300)#ff0000:0.2:0.2-00ff00:0.8'

放射状グラデーション形式の例:

'r(0.5,0.5,1)#ff0000-#0000ff', 'R(100,100,100,200,200,200)#ff0000-#0000ff'

基本

定義済みのグラデーションカラーから選択して、さまざまな外観を確認します。

<wj-flex-chart items-source="data" binding-x="country" control="gradientBasicChart"> <wj-flex-chart-series binding="sales" ng-attr-style="chartProps.gradientPredefinedColor"></wj-flex-chart-series> </wj-flex-chart> <dl class="dl-horizontal"> <wj-menu value="chartProps.gradientPredefinedColor" header="グラデーションの色"> <wj-menu-item value="{fill:'l(0,0,1,0)#89f7fe-#66a6ff'}">Light Blue - l(0, 0, 1, 0)#89f7fe-#66a6ff</wj-menu-item> <wj-menu-item value="{fill:'l(0,0,0,1)#13547a-#80d0c7'}">Aqua - l(0, 0, 0, 1)#13547a-#80d0c7</wj-menu-item> <wj-menu-item value="{fill:'l(0,0,1,1)#ff0844-#ffb199'}">Red - l(0, 0, 1, 1)#ff0844-#ffb199</wj-menu-item> <wj-menu-item value="{fill:'l(0,0,1,0)#b224ef-#7579ff-#b224ef'}">Purple - l(0, 0, 1, 0)#b224ef-#7579ff-#b224ef</wj-menu-item> <wj-menu-item value="{fill:'r(0.5,0.5,0.7)#cc208e-#6713d2'}">Plum - r(0.5,0.5,0.7)#cc208e-#6713d2</wj-menu-item> <wj-menu-item value="{fill:'l(0,0,1,0)#30cfd0-#330867'}">Deep Blue - l(0, 0, 1, 0)#30cfd0-#330867</wj-menu-item> <wj-menu-item value="{fill:'l(0,0,0,1)#e27f00-#ae1a73'}">Orange - l(0, 0, 0, 1)#e27f00-#ae1a73</wj-menu-item> <wj-menu-item value="{fill:'l(0,0,1,1)#abd800-#5c7e00'}">Green - l(0, 0, 1, 1)#abd800-#5c7e00</wj-menu-item> </wj-menu> </dl>
// add chart properties to scope $scope.chartProps = { gradientPredefinedColor: { fill:'l(0,0,1,0)#89f7fe-#66a6ff' } };

結果(ライブ):

Light Blue - l(0, 0, 1, 0)#89f7fe-#66a6ff Aqua - l(0, 0, 0, 1)#13547a-#80d0c7 Red - l(0, 0, 1, 1)#ff0844-#ffb199 Purple - l(0, 0, 1, 0)#b224ef-#7579ff-#b224ef Plum - r(0.5,0.5,0.7)#cc208e-#6713d2 Deep Blue - l(0, 0, 1, 0)#30cfd0-#330867 Orange - l(0, 0, 0, 1)#e27f00-#ae1a73 Green - l(0, 0, 1, 1)#abd800-#5c7e00

応用

複数のオプションを設定して、グラデーションの色をカスタマイズします。

<wj-flex-chart items-source="data" control="gradientChart"> <wj-flex-chart-series binding="sales"></wj-flex-chart-series> </wj-flex-chart> <dl class="dl-horizontal"> <dt>塗りつぶし文字列:</dt> <dd> <label>{{ chartProps.gradientFill }}</label> </dd> <dt></dt> <dd> <wj-menu value="chartProps.gradientType" header="タイプ"> <wj-menu-item value="'l'">Linear</wj-menu-item> <wj-menu-item value="'r'">Radial</wj-menu-item> </wj-menu> </dd> <dt ng-show="chartProps.gradientType === 'l'"></dt> <dd ng-show="chartProps.gradientType === 'l'"> <wj-menu is-visible="false" value="chartProps.gradientDirection" header="方向"> <wj-menu-item value="'horizontal'">Horizontal</wj-menu-item> <wj-menu-item value="'vertical'">Vertical</wj-menu-item> </wj-menu> </dd> <dt>最初の色:</dt> <dd><wj-input-color value="chartProps.startColor"></wj-input-color></dd> <dt>最初のオフセット:</dt> <dd> <wj-input-number control="inputStartOffset" value="chartProps.startOffset" min="0" max="1" step=".1"> </wj-input-number> </dd> <dt>最初の不透明度:</dt> <dd> <wj-input-number control="inputStartOpacity" value="chartProps.startOpacity" min="0" max="1" step=".1"> </wj-input-number> </dd> <dt>最後の色:</dt> <dd><wj-input-color value="chartProps.endColor"></wj-input-color></dd> <dt>最後のオフセット:</dt> <dd> <wj-input-number control="inputEndOffset" value="chartProps.endOffset" min="0" max="1" step=".1"> </wj-input-number> </dd> <dt>最後の不透明度:</dt> <dd> <wj-input-number control="inputEndOpacity" value="chartProps.endOpacity" min="0" max="1" step=".1"> </wj-input-number> </dl>
// add data array to scope $scope.data = data; // add chart properties to scope $scope.chartProps = { gradientFill: '', gradientType: 'l', gradientDirection: 'horizontal', startColor: '#ff0000', startOffset: 0, startOpacity: 1, endColor: '#0000ff', endOffset: 1, endOpacity: 1 }; $scope.$watch('gradientChart', function () { var gradientChart = $scope.gradientChart; if (gradientChart != null) { applyGradientColor(); } }); $scope.$watch('chartProps.gradientType', function () { if ($scope.chartProps.gradientType != null) { applyGradientColor(); } }); $scope.$watch('chartProps.gradientDirection', function () { if ($scope.chartProps.gradientDirection != null) { applyGradientColor(); } }); $scope.$watch('chartProps.startColor', function () { if ($scope.chartProps.startColor != null) { applyGradientColor(); } }); $scope.$watch('chartProps.startOffset', function () { var inputStartOffset = $scope.inputStartOffset, val = $scope.chartProps.startOffset; if (inputStartOffset != null) { if (val < inputStartOffset.min || val > inputStartOffset.max || val >= $scope.chartProps.endOffset) { return; } applyGradientColor(); } }); $scope.$watch('chartProps.startOpacity', function () { var inputStartOpacity = $scope.inputStartOpacity, val = $scope.chartProps.startOpacity; if (inputStartOpacity != null) { if (val < inputStartOpacity.min || val > inputStartOpacity.max) { return; } applyGradientColor(); } }); $scope.$watch('chartProps.endColor', function () { if ($scope.chartProps.endColor != null) { applyGradientColor(); } }); $scope.$watch('chartProps.endOffset', function () { var inputEndOffset = $scope.inputEndOffset, val = $scope.chartProps.endOffset; if (inputEndOffset != null) { if (val < inputEndOffset.min || val > inputEndOffset.max || val <= $scope.chartProps.startOffset) { return; } applyGradientColor(); } }); $scope.$watch('chartProps.endOpacity', function () { var inputEndOpacity = $scope.inputEndOpacity, val = $scope.chartProps.endOpacity; if (inputEndOpacity != null) { if (val < inputEndOpacity.min || val > inputEndOpacity.max) { return; } applyGradientColor(); } }); function applyGradientColor() { if ($scope.gradientChart == null) { return; } var chart = $scope.gradientChart, color = '', props = $scope.chartProps, type = props.gradientType, direction = props.gradientDirection; color = type; if (type === 'l') { if (direction === 'horizontal') { color += '(0, 0, 1, 0)'; } else { color += '(0, 0, 0, 1)'; } } else { color += '(0.5, 0.5, 0.5)' } color += props.startColor; if (props.startOffset !== 0 && props.startOffset !== 1) { color += ':' + props.startOffset; } if (props.startOpacity !== 1) { color += ':' + props.startOpacity; } color += '-' + props.endColor; if (props.endOffset !== 0 && props.endOffset !== 1) { color += ':' + props.endOffset; } if (props.endOpacity !== 1) { color += ':' + props.endOpacity; } $scope.chartProps.gradientFill = color; chart.series[0].style = { fill: color }; }

結果(ライブ):

縦棒 横棒 スプライン面
塗りつぶし文字列:
線形 放射状
水平 垂直
最初の色:
最初のオフセット:
最初の不透明度:
最後の色:
最後のオフセット:
最後の不透明度:

動的チャート

FlexChartはICollectionViewを内部で使用するため、データソースに加えた変更は自動的にチャートに反映されます。

このサンプルでは、タイマーを使用してデータソースに項目を追加し、古い項目を破棄して総件数を200件に維持しています。その結果、新しいデータが到着するにつれてスクロールする動的チャートになります。

<wj-flex-chart items-source="trafficData" chart-type="Area" stacking="Stacked" binding-x="time"> <wj-flex-chart-axis wj-property="axisX" format="mm:ss"></wj-flex-chart-axis> <wj-flex-chart-series name="Trucks" binding="trucks"></wj-flex-chart-series> <wj-flex-chart-series name="Ships" binding="ships"></wj-flex-chart-series> <wj-flex-chart-series name="Planes" binding="planes"></wj-flex-chart-series> </wj-flex-chart> <div class="btn-group"> <button type="button" class="btn btn-default" ng-click="setInterval(200)">Slow</button> <button type="button" class="btn btn-default" ng-click="setInterval(100)">Medium</button> <button type="button" class="btn btn-default" ng-click="setInterval(50)">Fast</button> <button type="button" class="btn btn-default" ng-click="setInterval(0)">Stop</button> </div>
// dynamic data var toAddData; $scope.trafficData = new wijmo.collections.ObservableArray(); $scope.setInterval = function (interval) { if (toAddData) { clearTimeout(toAddData); toAddData = null; } $scope.interval = interval; if (interval) { toAddData = setTimeout(addTrafficItem); } }; $scope.setInterval(500); function addTrafficItem() { // add random data, limit array length ... // keep adding ... }

結果(ライブ):

更新速度