FlexChart入門

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

はじめに

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

  1. Wijmoへの参照を追加します。
  2. FlexChartのホストとして機能するマークアップを追加します。
  3. JavaScriptとそのitemSourceプロパティでFlexChartを初期化します。
  4. 1つまたは複数のデータシリーズを作成し、それぞれをFlexChartのシリーズコレクションに追加します。
  5. (オプション)コントロールの外観をカスタマイズするCSSを追加します。
HTML
<div id="gettingStartedChart"></div>
JS
var gsChart = new wijmo.chart.FlexChart('#gettingStartedChart', { itemsSource: appData, bindingX: 'country', series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads' } ] });
CSS
/* 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; display:block; } .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; }

結果(ライブ):

チャートタイプ

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

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

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

HTML
<div id="chartTypes"></div> <select id="typeMenu"> <option value="0" selected="selected">Column</option> <option value="1">Bar</option> <option value="2">Scatter</option> <option value="3">Line</option> <option value="4">LineSymbols</option> <option value="5">Area</option> <option value="9">Spline</option> <option value="10">SplineSymbols</option> <option value="11">SplineArea</option> </select> <select id="stackingMenu"> <option value="0" selected="selected">None</option> <option value="1">Stacked</option> <option value="2">Stacked 100%</option> </select> <select id="rotatedMenu"> <option value="false" selected="selected">False</option> <option value="true">True</option> </select>
JS
var ctChart = new wijmo.chart.FlexChart('#chartTypes', { itemsSource: appData, bindingX: 'country', series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads' } ] }); var typeMenu = new wijmo.input.Menu('#typeMenu', { itemClicked: function (s, e) { ctChart.chartType = parseInt(s.selectedValue); updateMenuHeader(s, 'チャートタイプ'); } }); updateMenuHeader(typeMenu, 'チャートタイプ'); var stackingMenu = new wijmo.input.Menu('#stackingMenu', { itemClicked: function (s, e) { ctChart.stacking = parseInt(s.selectedValue); updateMenuHeader(s, '積み上げ'); } }); updateMenuHeader(stackingMenu, '積み上げ'); var rotatedMenu = new wijmo.input.Menu('#rotatedMenu', { itemClicked: function (s, e) { ctChart.rotated = s.selectedValue == 'true'; updateMenuHeader(s, '回転'); } }); updateMenuHeader(rotatedMenu, '回転');

結果(ライブ):

範囲棒

既定では、棒グラフと縦棒グラフはゼロから所定の値までの値を示します。 範囲棒グラフでは2つのバインディングが使用されるため、各バーの開始と終了の場所を指定できます。

以下の例では、範囲棒グラフを作成する方法を示します。

HTML
<div id="rangebarChart"></div> <select id="rangebarTypeMenu"> <option value="0" selected="selected">Column</option> <option value="1">Bar</option> </select> <select id="rangebarDataTypeMenu"> <option value="num1,num2" selected="selected">Number</option> <option value="date1,date2">Date</option> </select>
JS
var rngChart = new wijmo.chart.FlexChart('#rangebarChart', { itemsSource: rangeData, bindingX: 'country', series: [{ binding: 'num1,num2' }], tooltip: { content: function (ht) { var str = ht.x + ':
'; var dataTypes = rangebarDataTypeMenu.selectedValue.split(','); var min = Math.min(ht.item[dataTypes[0]], ht.item[dataTypes[1]]); var max = Math.max(ht.item[dataTypes[0]], ht.item[dataTypes[1]]); if (wijmo.isDate(ht.item[dataTypes[0]])) { str += (new Date(min)).toLocaleDateString() + ' - ' + (new Date(max)).toLocaleDateString(); } else { str += Math.round(min) + ' - ' + Math.round(max); } return str; } } }); var rangebarTypeMenu = new wijmo.input.Menu('#rangebarTypeMenu', { itemClicked: function (s, e) { rngChart.chartType = parseInt(s.selectedValue); updateMenuHeader(s, 'チャートタイプ'); } }); updateMenuHeader(rangebarTypeMenu, 'チャートタイプ'); var rangebarDataTypeMenu = new wijmo.input.Menu('#rangebarDataTypeMenu', { itemClicked: function (s, e) { rngChart.series[0].binding = s.selectedValue; updateMenuHeader(s, 'データタイプ'); } }); updateMenuHeader(rangebarDataTypeMenu, 'データタイプ');

結果(ライブ):

ファンネルチャート

ファンネルチャートは、販売プロセスの段階を表し、各段階の潜在的な収益の量を示すためによく使用されます。 また、組織の営業プロセスにおける潜在的な問題領域を特定するのにも役立ちます。

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

HTML
<div id="funnelChart"></div> <dl class="dl-horizontal"> <dt>ネックの幅</dt> <dd> <div id="funnelNeckWidth"></div> </dd> </dl> <dl class="dl-horizontal"> <dt>ネックの高さ</dt> <dd> <div id="funnelNeckHeight"></div> </dd> </dl> <dl class="dl-horizontal"> <dt></dt> <dd> <select id="funnelType"> <option value="default" selected="selected">Default</option> <option value="rectangle">Rectangle</option> </select> </dd> </dl>
JS
var fnlChart = new wijmo.chart.FlexChart('#funnelChart', { itemsSource: funnelData, chartType: wijmo.chart.ChartType.Funnel, bindingX: 'country', series: [ { name: 'Sales', binding: 'sales' } ], dataLabel: { content: '{y}' }, options: { funnel: { neckWidth: 0.2, neckHeight: 0.2, type: 'default' } } }); var neckWidth = new wijmo.input.InputNumber('#funnelNeckWidth', { min: 0, max: 1, step: .1, valueChanged: function (s, e) { if (s.value >= s.min && s.value <= s.max) { fnlChart.options.funnel.neckWidth = s.value; fnlChart.refresh(true); } }, value: 0.2 }); var neckHeight = new wijmo.input.InputNumber('#funnelNeckHeight', { min: 0, max: 1, step: .1, valueChanged: function (s, e) { if (s.value >= s.min && s.value <= s.max) { fnlChart.options.funnel.neckHeight = s.value; fnlChart.refresh(true); } }, value: 0.2 }); var funnelType = new wijmo.input.Menu('#funnelType', { itemClicked: function (s, e) { fnlChart.options.funnel.type = s.selectedValue; fnlChart.refresh(true); updateMenuHeader(s, 'ファンネルタイプ'); } }); updateMenuHeader(funnelType, 'ファンネルタイプ');

結果(ライブ):

ネックの幅
ネックの高さ

複合チャート

個々のシリーズのchartTypeプロパティを設定することで、各チャートシリーズに異なるグラフタイプを使用できます。 これは、チャートのデフォルトのチャートタイプをオーバーライドします。

下の例では、グラフのchartTypeプロパティはColumnに設定されていますが、DownloadsシリーズはそれをオーバーライドしてLineAndSymbolグラフタイプを使用します。

HTML
<div id="mixedTypesChart"></div>
JS
var mixChart = new wijmo.chart.FlexChart('#mixedTypesChart', { itemsSource: appData, bindingX: 'country', series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads', chartType: wijmo.chart.ChartType.LineSymbols } ] });

結果(ライブ):

凡例とタイトル

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

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

HTML
<div id="chartLegendAndTitles"></div> <dl class="dl-horizontal"> <dt>Header</dt><dd><input id="headerInput" class="form-control"/></dd> <dt>Footer</dt><dd><input id="footerInput" class="form-control"/></dd> <dt>X軸タイトル</dt><dd><input id="xTitleInput" class="form-control"/></dd> <dt>Y軸タイトル</dt><dd><input id="yTitleInput" class="form-control"/></dd> <dt></dt> <dd> <select id="positionMenu"> <option value="0">None</option> <option value="1">Left</option> <option value="2">Top</option> <option value="3" selected="selected">Right</option> <option value="4">Bottom</option> </select> </dd> </dl>
JS
var ltChart = new wijmo.chart.FlexChart('#chartLegendAndTitles', { itemsSource: appData, bindingX: 'country', header: 'Sample Chart', footer: 'copyright (c) ComponentOne', axisX: { title: 'country' }, axisY: { title: 'amount' }, series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads' } ] }); var positionMenu = new wijmo.input.Menu('#positionMenu', { itemClicked: function (s, e) { ltChart.legend.position = parseInt(s.selectedValue); updateMenuHeader(s, '凡例'); } }); updateMenuHeader(positionMenu, '凡例'); // sync the input's value with FlexChart's header var headerInput = document.getElementById('headerInput'); headerInput.value = ltChart.header; headerInput.addEventListener('input', function (e) { ltChart.header = e.target.value; }); // sync the input's value with FlexChart's footer var footerInput = document.getElementById('footerInput'); footerInput.value = ltChart.footer; footerInput.addEventListener('input', function (e) { ltChart.footer = e.target.value; }); // sync the input's value with FlexChart's X-Axis title var xTitleInput = document.getElementById('xTitleInput'); xTitleInput.value = ltChart.axisX.title; xTitleInput.addEventListener('input', function (e) { ltChart.axisX.title = e.target.value; }); // sync the input's value with FlexChart's Y-Axis title var yTitleInput = document.getElementById('yTitleInput'); yTitleInput.value = ltChart.axisY.title; yTitleInput.addEventListener('input', function (e) { ltChart.axisY.title = e.target.value; });
CSS
.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}、国名が国旗に置き換えられています。

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

HTML
<div id="chartTooltip"></div>
JS
var ttChart = new wijmo.chart.FlexChart('#chartTooltip', { itemsSource: appData, bindingX: 'country', tooltip: { content: "<img src='resources/{x}.png'/> <b>{seriesName}</b><br/>{y}" }, series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads' } ] });

結果(ライブ):

系列のスタイルの設定

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

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

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

HTML
<div id="chartSeriesStyle"></div>
JS
var ssChart = new wijmo.chart.FlexChart('#chartSeriesStyle', { itemsSource: appData, bindingX: 'country', series: [ { name: 'Sales', binding: 'sales', style: { fill: 'green', stroke: 'darkgreen', strokeWidth: 1 } }, { name: 'Expenses', binding: 'expenses', style: { fill: 'red', stroke: 'darkred', strokeWidth: 1 } }, { name: 'Downloads', binding: 'downloads', chartType: 'LineSymbols', style: { stroke: 'orange', strokeWidth: 5 }, symbolStyle: { fill: 'gold', stroke: 'gold' } } ] });

結果(ライブ):

軸のカスタマイズ

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

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

HTML
<div id="chartCustomizeAxes"></div>
JS
var axChart = new wijmo.chart.FlexChart('#chartCustomizeAxes', { itemsSource: appData, bindingX: 'country', axisX: { axisLine: true, majorGrid: true }, axisY: { format: 'c0', max: 10000, majorUnit: 2000, axisLine: true, majorGrid: true }, series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' } ] });

結果(ライブ):

テーマ

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

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

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

HTML
<div id="chartTheme" class="custom-flex-chart"></div>
JS
var thmChart = new wijmo.chart.FlexChart('#chartTheme', { itemsSource: appData, bindingX: 'country', series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads' } ] });
CSS
/* custom chart theme */ .custom-flex-chart .wj-axis-x .wj-label { font-family: Courier New, Courier, monospace; font-weight: bold; } .custom-flex-chart .wj-legend .wj-label { font-family: Courier New, Courier, monospace; font-weight: bold; } .custom-flex-chart .wj-legend > rect { fill: #f8f8f8; stroke: #c0c0c0; } .custom-flex-chart .wj-plot-area > rect { fill: #f8f8f8; stroke: #c0c0c0; }

結果(ライブ):

選択モード

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

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

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

HTML
<div id="chartSelectionMode"></div> <select id="seletionModeMenu"> <option value="0">None</option> <option value="1" selected="selected">Series</option> <option value="2">Point</option> </select> <select id="chartTypeMenu"> <option value="0" selected="selected">Column</option> <option value="1">Bar</option> <option value="2">Scatter</option> <option value="3">Line</option> <option value="4">LineSymbols</option> <option value="5">Area</option> <option value="9">Spline</option> <option value="10">SplineSymbols</option> <option value="11">SplineArea</option> </select> <div id="seriesContainer" style="display:none"> <h4>現在の選択</h4> <p>Series: <b id="seriesName"></b></p> <dl id="detailContainer" class="dl-horizontal" style="display:none"> <dt>Country</dt><dd id="seriesCountry"></dd> <dt>Sales</dt><dd id="seriesSales"></dd> <dt>Expenses</dt><dd id="seriesExpenses"></dd> <dt>Downloads</dt><dd id="seriesDownloads"></dd> </dl> </div>
JS
var smChart = new wijmo.chart.FlexChart('#chartSelectionMode', { itemsSource: appData, bindingX: 'country', selectionMode: 'Series', series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads' } ], selectionChanged: function (s, e) { showChartSelection(); } }); // chart type var typeMenu = new wijmo.input.Menu('#chartTypeMenu', { itemClicked: function (s, e) { smChart.chartType = parseInt(s.selectedValue); updateMenuHeader(s, 'チャートタイプ'); } }); updateMenuHeader(typeMenu, 'チャートタイプ'); // selection mode var selectionModeMenu = new wijmo.input.Menu('#seletionModeMenu', { itemClicked: function (s, e) { smChart.selectionMode = parseInt(s.selectedValue); showChartSelection(); updateMenuHeader(s, '選択モード'); } }); updateMenuHeader(selectionModeMenu, '選択モード'); // update selection pane when selection or selection mode change function showChartSelection() { var seriesContainer = document.getElementById('seriesContainer'), series = smChart.selectionMode ? smChart.selection : null if (series) { // show selected series seriesContainer.style.display = ''; setText('seriesName', series.name); var item = series.collectionView.currentItem, detailContainer = document.getElementById('detailContainer'); if (item && smChart.selectionMode == wijmo.chart.SelectionMode.Point) { // show selected point detailContainer.style.display = ''; setText('seriesCountry', item.country); setText('seriesSales', item.sales, 'c2'); setText('seriesExpenses', item.expenses, 'c2'); setText('seriesDownloads', item.downloads, 'n0'); } else { detailContainer.style.display = 'none'; } } else { seriesContainer.style.display = 'none'; } }

結果(ライブ):

系列の表示/非表示 Visibility

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

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

  1. 凡例エントリをクリックする:
    チャートディレクティブによってチャートのoption.legendToggleプロパティがtrueに設定されています。そのため、系列の凡例エントリをクリックすると、その系列のvisibilityプロパティが切り替わります。
  2. チェックボックスを使用する:
    checkedの状態が変更されると、checkedの状態で各シリーズのvisibilityプロパティが設定されます。
HTML
<div id="chartLegendToggle"></div> <label> Sales <input id="cbSales" type="checkbox" checked="checked"/> </label><br /> <label> Expenses <input id="cbExpenses" type="checkbox" checked="checked"/> </label><br /> <label> Downloads <input id="cbDownloads" type="checkbox" checked="checked"/> </label><br />
JS
var svChart = new wijmo.chart.FlexChart('#chartLegendToggle', { // initialize chart itemsSource: appData, bindingX: 'country', legendToggle: true, series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads' } ], // update checkboxes when series visibility changes seriesVisibilityChanged: function (s, e) { s.series.forEach(function (series) { var seriesName = series.name, checked = series.visibility == wijmo.chart.SeriesVisibility.Visible; document.getElementById('cb' + seriesName).checked = checked; }); } }); // update series visibility when checkboxes are clicked svChart.series.forEach(function (series, index) { var el = document.getElementById('cb' + series.name); el.checked = series.visibility == wijmo.chart.SeriesVisibility.Visible; el.addEventListener('click', function (e) { series.visibility = e.target.checked ? wijmo.chart.SeriesVisibility.Visible : wijmo.chart.SeriesVisibility.Legend; }); });

結果(ライブ):




グラデーションの色

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'

基本

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

HTML
<div id="predefinedChart"></div> <div> <select id="predefinedColorMenu"> <option value="l(0,0,1,0)#89f7fe-#66a6ff" selected="selected">Light Blue - l(0, 0, 1, 0)#89f7fe-#66a6ff</option> <option value="l(0,0,0,1)#13547a-#80d0c7">Aqua - l(0, 0, 0, 1)#13547a-#80d0c7</option> <option value="l(0,0,1,1)#ff0844-#ffb199">Red - l(0, 0, 1, 1)#ff0844-#ffb199</option> <option value="l(0,0,1,0)#b224ef-#7579ff-#b224ef">Purple - l(0, 0, 1, 0)#b224ef-#7579ff-#b224ef</option> <option value="r(0.5,0.5,0.7)#cc208e-#6713d2">Plum - r(0.5,0.5,0.7)#cc208e-#6713d2</option> <option value="l(0,0,1,0)#30cfd0-#330867">Deep Blue - l(0, 0, 1, 0)#30cfd0-#330867</option> <option value="l(0,0,0,1)#e27f00-#ae1a73">Orange - l(0, 0, 0, 1)#e27f00-#ae1a73</option> <option value="l(0,0,1,1)#abd800-#5c7e00">Green - l(0, 0, 1, 1)#abd800-#5c7e00</option> </select> </div>
JS
var pdgradChart = new wijmo.chart.FlexChart('#predefinedChart', { itemsSource: appData, bindingX: 'country', series: [ { binding: 'sales' } ] }); var predefinedColorMenu = new wijmo.input.Menu('#predefinedColorMenu', { itemClicked: function (s, e) { applyBasicGradientColor(); updateMenuHeader(s, 'Color'); } }); updateMenuHeader(predefinedColorMenu, 'Color'); applyBasicGradientColor(); function applyBasicGradientColor() { pdgradChart.series[0].style = { fill: predefinedColorMenu.selectedValue }; pdgradChart.refresh(true); }

結果(ライブ):

応用

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

HTML
<div id="chartGradientColors"></div> <dl class="dl-horizontal"> <dt>塗りつぶし文字列:</dt> <dd> <label id="gradientColorsLabel"></label> </dd> <dt></dt> <dd> <select id="gradientChartType"> <option value="0" selected="selected">Column</option> <option value="1">Bar</option> <option value="5">Area</option> <option value="11">SplineArea</option> </select> </dd> <dt></dt> <dd> <select id="gradientTypeMenu"> <option value="l" selected="selected">Linear</option> <option value="r">Radial</option> </select> </dd> <dt id="dtGradientDirection"></dt> <dd id="ddGradientDirection"> <select id="gradientDirectionMenu"> <option value="horizontal" selected="selected">Horizontal</option> <option value="vertical">Vertical</option> </select> </dd> <dt>最初の色:</dt> <dd><input id="gradientStartColor"/></dd> <dt>最初のオフセット:</dt> <dd><input id="gradientStartOffset"/></dd> <dt>最初の不透明度:</dt> <dd><input id="gradientStartOpacity"/></dd> <dt>最後の色:</dt> <dd><input id="gradientEndColor"/></dd> <dt>最後のオフセット:</dt> <dd><input id="gradientEndOffset"/></dd> <dt>最後の不透明度:</dt> <dd><input id="gradientEndOpacity"/></dd> </dl>
JS
var gradChart = new wijmo.chart.FlexChart('#chartGradientColors', { itemsSource: appData, bindingX: 'country', series: [ { binding: 'sales' } ] }); // chart type var gradientChartType = new wijmo.input.Menu('#gradientChartType', { itemClicked: function (s, e) { gradChart.chartType = parseInt(gradientChartType.selectedValue); updateMenuHeader(s, 'チャートタイプ'); } }); updateMenuHeader(gradientChartType, 'チャートタイプ'); // custom gradient var startColor = new wijmo.input.InputColor('#gradientStartColor', { valueChanged: function(s, e) { applyGradientColor(); }, value: '#ff0000' }); var endColor = new wijmo.input.InputColor('#gradientEndColor', { valueChanged: function(s, e) { applyGradientColor(); }, value: '#0000ff' }); var startOffset = new wijmo.input.InputNumber('#gradientStartOffset', { min: 0, max: 1, step: .1, valueChanged: function(s, e) { if (s.value >= s.min && s.value <= s.max) { applyGradientColor(); } }, value: 0 }); var endOffset = new wijmo.input.InputNumber('#gradientEndOffset', { min: 0, max: 1, step: .1, valueChanged: function(s, e) { if (s.value >= s.min && s.value <= s.max) { applyGradientColor(); } }, value: 1 }); var startOpacity = new wijmo.input.InputNumber('#gradientStartOpacity', { min: 0, max: 1, step: .1, valueChanged: function(s, e) { if (s.value >= s.min && s.value <= s.max) { applyGradientColor(); } }, value: 1 }); var endOpacity = new wijmo.input.InputNumber('#gradientEndOpacity', { min: 0, max: 1, step: .1, valueChanged: function(s, e) { if (s.value >= s.min && s.value <= s.max) { applyGradientColor(); } }, value: 1 }); // gradient type and direction var type = new wijmo.input.Menu('#gradientTypeMenu', { itemClicked: function(s, e) { applyGradientColor(); updateMenuHeader(type, 'Gradient Type'); } }); updateMenuHeader(type, 'Gradient Type'); var direction = new wijmo.input.Menu('#gradientDirectionMenu', { itemClicked: function(s, e) { applyGradientColor(); updateMenuHeader(direction, 'Direction'); } }); updateMenuHeader(direction, 'Direction'); // apply the current gradient color function applyGradientColor() { if (type && direction) { var t = type.selectedValue, d = direction.selectedValue, color = t, dtDirection = document.getElementById('dtGradientDirection'), ddDirection = document.getElementById('ddGradientDirection'); if (t === 'l') { dtDirection.style.display = 'block'; ddDirection.style.display = 'block'; color += d == 'horizontal' ? '(0, 0, 1, 0)' : '(0, 0, 0, 1)'; } else { dtDirection.style.display = 'none'; ddDirection.style.display = 'none'; color += '(0.5, 0.5, 0.5)' } color += startColor.value; if (startOffset.value != 0 || startOpacity.value != 1) { color += ':' + startOffset.value; } if (startOpacity.value != 1) { color += ':' + startOpacity.value; } color += '-' + endColor.value; if (endOffset.value != 1 || endOpacity.value != 1) { color += ':' + endOffset.value; } if (endOpacity.value != 1) { color += ':' + endOpacity.value; } setText('gradientColorsLabel', color); gradChart.series[0].style = { fill: color }; gradChart.refresh(true); } } applyGradientColor();

結果(ライブ):

塗りつぶし文字列:
最初の色:
最初のオフセット:
最初の不透明度:
最後の色:
最後のオフセット:
最後の不透明度:

動的チャート

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

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

HTML
<div id="dynamicChart"></div> <dl class="dl-horizontal"> <dt>更新速度</dt> <dd> <div class="btn-group"> <button id="btnSlow" type="button" class="btn btn-default">Slow</button> <button id="btnMedium" type="button" class="btn btn-default">Medium</button> <button id="btnFast" type="button" class="btn btn-default">Fast</button> <button id="btnStop" type="button" class="btn btn-default">Stop</button> </div> </dd> </dl>
JS
var toAddData = null, interval = null, trafficData = new wijmo.collections.ObservableArray(), setInterval = function(interval) { if (toAddData) { clearTimeout(toAddData); toAddData = null; } if (interval) { toAddData = setTimeout(function() { addTrafficItem(trafficData, interval); }); } }; // create FlexChart var dynamicChart = new wijmo.chart.FlexChart('#dynamicChart', { chartType: 'Area', stacking: 'Stacked', itemsSource: trafficData, bindingX: 'time', axisX: { format: 'mm:ss' }, series: [ { name: 'Trucks', binding: 'trucks' }, { name: 'Ships', binding: 'ships' }, { name: 'Planes', binding: 'planes' } ] }); setInterval(500); // Bind the click event to the speed buttons var intervalHash = { // interval hash for the speed buttons Slow: 200, Medium: 100, Fast: 50, Stop: 0 }; for (var prop in intervalHash) { document.getElementById('btn' + prop).addEventListener('click', buttonClick(intervalHash[prop])); } function buttonClick(value) { return function() { setInterval(value); }; } function addTrafficItem(trafficData, interval) { var len = trafficData.length, last = len ? trafficData[len - 1] : null, trucks = last ? last.trucks : 0, ships = last ? last.ships : 0, planes = last ? last.planes : 0; trucks = Math.max(0, trucks + Math.round(Math.random() * 50 - 25)); ships = Math.max(0, ships + Math.round(Math.random() * 10 - 5)); planes = Math.max(0, planes + Math.round(Math.random() * 10 - 5)); // add random data, limit array length trafficData.push({ time: new Date(), trucks: trucks, ships: ships, planes: planes }); if (trafficData.length > 200) { trafficData.splice(0, 1); } // keep adding if (interval) { toAddData = setTimeout(function() { addTrafficItem(trafficData, interval); }, interval); } }

結果(ライブ):

更新速度