FlexChart入門

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

はじめに

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

  1. Add references to Wijmo.
  2. Add markup to serve as the FlexChart's host.
  3. Initialize the FlexChart via JavaScript and its itemSource property.
  4. Create one or more data series, and add each to the FlexChart's series collection.
  5. (Optional) チャートの外観をカスタマイズする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: Selects the default chart type to be used for all the series. Individual series may override this.
  2. stacking: Determines whether series are plotted independently, stacked, or stacked so their sum is 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 } ] });

結果(ライブ):

凡例とタイトル

Use legend's properties to customize the appearance of the chart legend, and header, footer, and axis title properties to add titles to your charts.

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

The tooltip content is generated using a template, which may contain the following parameters:

デフォルトでは、ツールチップテンプレートは次のように設定されており<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);

結果(ライブ):

軸のカスタマイズ

Use axis properties to customize the chart's axes, including ranges (minimum and maximum), label format, tickmark spacing, and gridlines.

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コントロールの外観をカスタマイズして一貫性のある魅力的な見た目を提供できます。

To customize the appearance of the chart, inspect the elements you want to style and then create some CSS rules that apply to those elements.

For example, if you right-click one of the labels on the X axis in IE or Chrome, you will see that it is an element with the "wj-label" class, that is contained in an element with the "wj-axis-x" class, which is contained in the the top-level control element that has the "wj-flexchart" class. The first CSS rule in this example uses this information to customize the X labels. The rule selector adds the additional requirement that the parent element must have, the "wj-flexchart" and the "custom-flex-chart" classes. Without this, the rule would apply to all the charts on the page.

<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プロパティを使用します(選択はデフォルトではオフになっています)。

Setting the selectionMode property to Series or Point causes the FlexChart to update the Selection property when the user clicks the mouse, and to apply "wj-state-selected" class to the selected chart elements.

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>系列: <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. 凡例エントリをクリックする:
    The chart sets the chart's option.legendToggle property to true, which toggles the visibility property of a series when its legend entry is clicked.
  2. チェックボックスを使用する:
    When the checked state changed, it will set the visibility property of each series by the checked state.
<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); } }

結果(ライブ):

更新速度