FlexChart入門

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

はじめに

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

  1. Wijmoへの参照を追加します。
  2. FlexChartのホストとして機能するマークアップを追加します。
  3. JavaScriptとそのitemSourceプロパティでFlexChartを初期化します。
  4. 1つまたは複数のデータシリーズを作成し、それぞれをFlexChartのシリーズコレクションに追加します。
  5. (オプション)コントロールの外観をカスタマイズする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> <script src="scripts/app.js" type="text/javascript"></script> </head> <body> <!-- this is the FlexChart --> <div id="gettingStartChart"></div> </body> </html>
// create FlexChart var gettingStartedChart = new wijmo.chart.FlexChart('#gettingStartedChart'); // initialize FlexChart's properties gettingStartedChart.initialize({ itemsSource: appData, bindingX: 'country', series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads' } ] });
.wj-flexchart { background-color: white; box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75); height: 400px; margin-bottom: 12px; padding: 8px; }

結果(ライブ):

チャートタイプ

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

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

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

<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>
// create FlexChart and Menus var chartTypes = new wijmo.chart.FlexChart('#chartTypes'), typeMenu = new wijmo.input.Menu('#typeMenu'), stackingMenu = new wijmo.input.Menu('#stackingMenu'), rotatedMenu = new wijmo.input.Menu('#rotatedMenu'); // initialize FlexChart's properties chartTypes.initialize({ itemsSource: appData, bindingX: 'country', series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads' } ] }); // update the menus' headers updateMenuHeader(typeMenu, 'チャートタイプ'); updateMenuHeader(stackingMenu, 'Stacking'); updateMenuHeader(rotatedMenu, 'Rotated'); typeMenu.selectedIndexChanged.addHandler(function () { if (typeMenu.selectedValue) { // update FlexChart's chartType chartTypes.chartType = parseInt(typeMenu.selectedValue); // update menu header updateMenuHeader(typeMenu, 'チャートタイプ'); } }); stackingMenu.selectedIndexChanged.addHandler(function () { if (stackingMenu.selectedValue) { // update FlexChart's stacking property chartTypes.stacking = parseInt(stackingMenu.selectedValue); // update menu header updateMenuHeader(stackingMenu, 'Stacking'); } }); rotatedMenu.selectedIndexChanged.addHandler(function () { if (rotatedMenu.selectedValue) { // specify if chart should be rotated or not chartTypes.rotated = rotatedMenu.selectedValue === 'true'; // update menu header updateMenuHeader(rotatedMenu, 'Rotated'); } }); // helper function for Menu headers function updateMenuHeader(menu, prefix) { menu.header = '<b>' + prefix + '</b>: ' + menu.text; }

結果(ライブ):

ファンネルチャート

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

<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>
// create FlexChart and Menus var funnelChart = new wijmo.chart.FlexChart('#funnelChart'), neckWidth = new wijmo.input.InputNumber('#funnelNeckWidth'), funnelType = new wijmo.input.Menu('#funnelType'), neckHeight = new wijmo.input.InputNumber('#funnelNeckHeight'); // initialize FlexChart's properties funnelChart.initialize({ 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' } } }); // neckWidth - initialize InputNumber's properties neckWidth.min = 0; neckWidth.max = 1; neckWidth.step = 0.1; neckWidth.valueChanged.addHandler(function (sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } funnelChart.options.funnel.neckWidth = sender.value; funnelChart.refresh(true); }); neckWidth.value = 0.2; // neckHeight - initialize InputNumber's properties neckHeight.min = 0; neckHeight.max = 1; neckHeight.step = 0.1; neckHeight.valueChanged.addHandler(function (sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } funnelChart.options.funnel.neckHeight = sender.value; funnelChart.refresh(true); }); neckHeight.value = 0.2; updateMenuHeader(funnelType, 'ファンネルタイプ'); funnelType.selectedIndexChanged.addHandler(function () { if (funnelType.selectedValue) { funnelChart.options.funnel.type = funnelType.selectedValue; updateMenuHeader(funnelType, 'ファンネルタイプ'); funnelChart.refresh(true); } }); // helper function for Menu headers function updateMenuHeader(menu, prefix) { menu.header = '' + prefix + ': ' + menu.text; }

結果(ライブ):

ネックの幅
ネックの高さ

複合チャート

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

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

<div id="mixedTypesChart"></div>
// create FlexChart var mixedTypesChart = new wijmo.chart.FlexChart('#mixedTypesChart'); // initialize FlexChart's properties mixedTypesChart.initialize({ 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属性を使用する必要があります。

<div id="chartLegendTitles"></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>
var chartLegendAndTitles = new wijmo.chart.FlexChart('#chartLegendAndTitles'), positionMenu = new wijmo.input.Menu('#positionMenu'), headerInput = document.getElementById('headerInput'), footerInput = document.getElementById('footerInput'), xTitleInput = document.getElementById('xTitleInput'), yTitleInput = document.getElementById('yTitleInput'); // initialize FlexChart's properties chartLegendAndTitles.initialize({ 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' } ] }); // sync the input's value with FlexChart's header headerInput.value = chartLegendAndTitles.header; // update the FlexChart's header headerInput.addEventListener('input', function () { chartLegendAndTitles.header = this.value; }); // sync the input's value with FlexChart's footer footerInput.value = chartLegendAndTitles.footer; // update the FlexChart's footer footerInput.addEventListener('input', function () { chartLegendAndTitles.footer = this.value; }); // sync the input's value with FlexChart's X-Axis title xTitleInput.value = chartLegendAndTitles.axisX.title; // update the FlexChart's X-Axis title xTitleInput.addEventListener('input', function () { chartLegendAndTitles.axisX.title = this.value; }); // sync the input's value with FlexChart's Y-Axis title yTitleInput.value = chartLegendAndTitles.axisY.title; // update the FlexChart's Y-Axis title yTitleInput.addEventListener('input', function () { chartLegendAndTitles.axisY.title = this.value; }); // update menu's header updatePositionMenuHeader(); positionMenu.selectedIndexChanged.addHandler(function () { if (positionMenu.selectedValue) { // update the FlexChart legend's position chartLegendAndTitles.legend.position = parseInt(positionMenu.selectedValue); // update menu's header updatePositionMenuHeader(); } }); function updatePositionMenuHeader() { positionMenu.header = '<b>Legend:</b> ' + positionMenu.text; }
.wj-flexchart .wj-title { font-weight: bold; } .wj-flexchart .wj-header .wj-title { fill: #80044d; font-size: 18pt; } .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}、国名が国旗に置き換えられています。

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

<div id="chartTooltip"></div>
// create FlexChart var chartTooltip = new wijmo.chart.FlexChart('#chartTooltip'); // initialize FlexChart's properties chartTooltip.initialize({ 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プロパティを使用して各系列のスタイル属性を選択しています。

<div id="chartSeriesStyle"></div>
// create FlexChart and variables for its series var chartSeriesStyle = new wijmo.chart.FlexChart('#chartSeriesStyle'), salesSeries, expensesSeries, downloadsSeries; chartSeriesStyle.itemsSource = appData; chartSeriesStyle.bindingX = 'country'; // initialize "Sales" data series salesSeries = new wijmo.chart.Series(); salesSeries.name = 'Sales'; salesSeries.binding = 'sales'; salesSeries.style = {}; salesSeries.style.fill = 'green'; salesSeries.style.stroke = 'darkgreen'; salesSeries.style.strokeWidth = 1; // initialize "Expenses" data series expensesSeries = new wijmo.chart.Series(); expensesSeries.name = 'Expenses'; expensesSeries.binding = 'expenses'; expensesSeries.style = {}; expensesSeries.style.fill = 'red'; expensesSeries.style.stroke = 'darkred'; expensesSeries.style.strokeWidth = 1; // initialize "Downloads" data series downloadsSeries = new wijmo.chart.Series(); downloadsSeries.name = 'Downloads'; downloadsSeries.binding = 'downloads'; downloadsSeries.chartType = wijmo.chart.ChartType.LineSymbols; downloadsSeries.style = {}; downloadsSeries.symbolStyle = {}; downloadsSeries.style.stroke = 'orange'; downloadsSeries.style.strokeWidth = 5; downloadsSeries.symbolStyle.fill = 'gold'; downloadsSeries.symbolStyle.stroke = 'gold'; // add data series to chart chartSeriesStyle.series.push(salesSeries); chartSeriesStyle.series.push(expensesSeries); chartSeriesStyle.series.push(downloadsSeries);

結果(ライブ):

軸のカスタマイズ

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

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

<div id="chartCustomizeAxes"></div>
// create FlexChart var chartCustomizeAxes = new wijmo.chart.FlexChart('#chartCustomizeAxes'); // initialize FlexChart's properties chartCustomizeAxes.initialize({ 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"の両方のクラスを持たなければならないという要件が追加されています。 これがなければ、このルールはページ上のすべてのチャートに適用されます。

<div id="chartTheme" class="custom-flex-chart"></div>
// create FlexChart var chartTheme = new wijmo.chart.FlexChart('#chartTheme'); // initialize FlexChart's properties chartTheme.initialize({ itemsSource: appData, bindingX: 'country', series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads' } ] });
/* custom chart theme */ .custom-flex-chart.wj-flexchart .wj-axis-x .wj-label, .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, .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プロパティを使用して、選択された系列内の現在選択されている項目を取得します。

<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>
var chartSelectionMode = new wijmo.chart.FlexChart('#chartSelectionMode'), typeMenu = new wijmo.input.Menu('#chartTypeMenu'), selectionModeMenu = new wijmo.input.Menu('#seletionModeMenu'), seriesContainer = document.getElementById('seriesContainer'), detailContainer = document.getElementById('detailContainer'); // initialize FlexChart's properties chartSelectionMode.initialize({ itemsSource: appData, bindingX: 'country', selectionMode: wijmo.chart.SelectionMode.Series, series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads' } ] }); // update details when the FlexChart's selection changes chartSelectionMode.selectionChanged.addHandler(function () { var currentSelection = chartSelectionMode.selection, currentSelectItem; if (currentSelection) { seriesContainer.style.display = 'block'; // show container document.getElementById('seriesName').innerHTML = currentSelection.name; currentSelectItem = currentSelection.collectionView.currentItem; if (currentSelectItem && selectionModeMenu.selectedValue === '2') { setSeriesDetail(currentSelectItem); // update details } } }); // update Menu header updateMenuHeader(typeMenu, 'チャートタイプ'); typeMenu.selectedIndexChanged.addHandler(function () { if (typeMenu.selectedValue) { // update FlexChart' chartType chartSelectionMode.chartType = parseInt(typeMenu.selectedValue); // update Menu header updateMenuHeader(typeMenu, 'チャートタイプ'); } }); // update Menu header updateMenuHeader(selectionModeMenu, '選択モード'); selectionModeMenu.selectedIndexChanged.addHandler(function () { if (selectionModeMenu.selectedValue) { // update FlexChart' selectionMode chartSelectionMode.selectionMode = parseInt(selectionModeMenu.selectedValue); // toggle the series panel's visiblity if (selectionModeMenu.selectedValue === '0' || !chartSelectionMode.selection) { seriesContainer.style.display = 'none'; } else { seriesContainer.style.display = 'block'; } // toggle the series panel's visiblity if (selectionModeMenu.selectedValue !== '2' || !chartSelectionMode.selection || !chartSelectionMode.selection.collectionView.currentItem) { detailContainer.style.display = 'none'; } else { // update the details setSeriesDetail(chartSelectionMode.selection.collectionView.currentItem); } // update Menu header updateMenuHeader(selectionModeMenu, '選択モード'); } }); // helper method to show details of the FlexChart's current selection function setSeriesDetail(currentSelectItem) { detailContainer.style.display = 'block'; document.getElementById('seriesCountry').innerHTML = currentSelectItem.country; document.getElementById('seriesSales').innerHTML = wijmo.Globalize.format(currentSelectItem.sales, 'c2'); document.getElementById('seriesExpenses').innerHTML = wijmo.Globalize.format(currentSelectItem.expenses, 'c2'); document.getElementById('seriesDownloads').innerHTML = wijmo.Globalize.format(currentSelectItem.downloads, 'n0'); }; // helper method for changing menu header function updateMenuHeader(menu, prefix) { menu.header = '<b>' + prefix + '</b>: ' + menu.text; }

結果(ライブ):

系列の表示/非表示

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

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

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

基本

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

<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>
var predefinedChart = new wijmo.chart.FlexChart('#predefinedChart'), predefinedColorMenu = new wijmo.input.Menu('#predefinedColorMenu'); // initialize FlexChart's properties predefinedChart.initialize({ itemsSource: appData, bindingX: 'country', series: [ { binding: 'sales' } ] }); updateMenuHeader(predefinedColorMenu, 'Color'); predefinedColorMenu.selectedIndexChanged.addHandler(function () { if (predefinedColorMenu.selectedValue) { applyBasicGradientColor(); updateMenuHeader(predefinedColorMenu, 'Color'); } }); applyBasicGradientColor(); function applyBasicGradientColor() { predefinedChart.series[0].style = { fill: predefinedColorMenu.selectedValue }; predefinedChart.refresh(true); }

結果(ライブ):

応用

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

<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>
// create FlexChart and Menus var chart = new wijmo.chart.FlexChart('#chartGradientColors'), gredientLabel = document.getElementById('gradientColorsLabel'), gradientChartType = new wijmo.input.Menu('#gradientChartType'), type = new wijmo.input.Menu('#gradientTypeMenu'), dtDirection = document.getElementById('dtGradientDirection'), ddDirection = document.getElementById('ddGradientDirection'), direction = new wijmo.input.Menu('#gradientDirectionMenu'), startColor = new wijmo.input.InputColor('#gradientStartColor'), startOffset = new wijmo.input.InputNumber('#gradientStartOffset'), startOpacity = new wijmo.input.InputNumber('#gradientStartOpacity'), endColor = new wijmo.input.InputColor('#gradientEndColor'), endOffset = new wijmo.input.InputNumber('#gradientEndOffset'), endOpacity = new wijmo.input.InputNumber('#gradientEndOpacity'); // initialize FlexChart's properties chart.initialize({ itemsSource: appData, bindingX: 'country', series: [ { binding: 'sales' } ] }); applyGradientColor(); //chart type - initialize Menu's properties updateMenuHeader(gradientChartType, 'チャートタイプ'); gradientChartType.selectedIndexChanged.addHandler(function () { if (gradientChartType.selectedValue) { chart.chartType = +gradientChartType.selectedValue; updateMenuHeader(gradientChartType, 'チャートタイプ'); } }); //startColor - initialize InputColor's properties startColor.valueChanged.addHandler(function (sender) { applyGradientColor(); }); startColor.value = '#ff0000'; // startOffset - initialize InputNumber's properties startOffset.min = 0; startOffset.max = 1; startOffset.step = 0.1; startOffset.valueChanged.addHandler(function (sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } applyGradientColor(); }); startOffset.value = 0; // startOpacity - initialize InputNumber's properties startOpacity.min = 0; startOpacity.max = 1; startOpacity.step = 0.1; startOpacity.valueChanged.addHandler(function (sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } applyGradientColor(); }); startOpacity.value = 1; //endColor - initialize InputColor's properties endColor.valueChanged.addHandler(function (sender) { applyGradientColor(); }); endColor.value = '#0000ff'; // endOffset - initialize InputNumber's properties endOffset.min = 0; endOffset.max = 1; endOffset.step = 0.1; endOffset.valueChanged.addHandler(function (sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } applyGradientColor(); }); endOffset.value = 1; // endOpacity - initialize InputNumber's properties endOpacity.min = 0; endOpacity.max = 1; endOpacity.step = 0.1; endOpacity.valueChanged.addHandler(function (sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } applyGradientColor(); }); endOpacity.value = 1; updateMenuHeader(type, 'Type'); type.selectedIndexChanged.addHandler(function () { if (type.selectedValue) { updateMenuHeader(type, 'Type'); applyGradientColor(); } }); updateMenuHeader(direction, 'Direction'); direction.selectedIndexChanged.addHandler(function () { if (direction.selectedValue) { updateMenuHeader(direction, 'Direction'); applyGradientColor(); } }); // helper function for Menu headers function updateMenuHeader(menu, prefix) { menu.header = '' + prefix + ': ' + menu.text; } function applyGradientColor() { var color = '', t = type.selectedValue, d = direction.selectedValue; color = t; if (t === 'l') { dtDirection.style.display = 'block'; ddDirection.style.display = 'block'; if (d === 'horizontal') { color += '(0, 0, 1, 0)'; } else { color += '(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; } gradientColorsLabel.innerHTML = color; chart.series[0].style = { fill: color }; chart.refresh(true); }

結果(ライブ):

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

動的チャート

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

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

<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>
// dynamic data var toAddData, interval, trafficData = new wijmo.collections.ObservableArray(), setInterval = function (interval) { if (toAddData) { clearTimeout(toAddData); toAddData = null; } if (interval) { toAddData = setTimeout(function () { addTrafficItem(trafficData, interval); }); } }, // define the interval hash for the speed buttons intervalHash = { Slow: 200, Medium: 100, Fast: 50, Stop: 0 }, // create FlexChart dynamicChart = new wijmo.chart.FlexChart('#dynamicChart'); // initialize FlexChart's properties dynamicChart.initialize({ chartType: wijmo.chart.ChartType.Area, stacking: wijmo.chart.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 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); } }

結果(ライブ):

更新速度