チャート：複数のプロット領域

デフォルトでは、各FlexChartには2つの軸と1つのプロット領域があります。

追加のプロット領域を作成し、垂直または水平に積み重ねることができます。縦に積み重ねられたプロット領域は、通常、独自のY軸と共通のX軸を持ちます。凡例はすべてのプロット領域で共有されます。

2つの系列を2つのプロット領域に表示するチャートを作成するには、次の手順に従います。

複数の系列を持つFlexChartを作成します。
各プロット領域を定義して、チャートのplotAreasコレクションに追加します。
必要な追加軸を定義し、plotAreaプロパティを設定して2番目のプロット領域に割り当てます。
手順3で定義した軸にaxisYプロパティまたはaxisXプロパティを設定して、2番目のプロット領域に少なくとも1つの系列を割り当てます。

たとえば、次のスニペットでは、2つのプロット領域を作成しています。最初のプロット領域には系列が2つ含まれ、Y軸に金額が表示されています。2番目のプロット領域には系列が1つ含まれ、Y軸に数量が表示されています。

import * as chart from '@mescius/wijmo.chart';

// チャートを作成します
var myChart = new chart.FlexChart('#myChart', {
    itemsSource: getData(),
    bindingX: 'country',
    series: [
        { binding: 'sales', name: '売上' },
        { binding: 'expenses', name: '費用' },
        { binding: 'downloads', name: 'DL数', chartType: 'LineSymbols' }
    ]
});

// 最初のプロット領域を定義して、チャートに追加します
var p = new chart.PlotArea();
p.row = 0;
p.name = 'amounts';
p.height = '2*';
myChart.plotAreas.push(p)

// 2番目のプロット領域を定義します
p = new chart.PlotArea();
p.row = 1;
p.name = 'quantities';
p.height = '*';

// 第2Y軸を定義します
var axisY2 = new chart.Axis(wijmo.chart.Position.Left);
// 第2Y軸を2番目のプロット領域に割り当てます
axisY2.plotArea = p;
// 第3系列「downloads」を第2Y軸に割り当てます
myChart.series[2].axisY = axisY2;
myChart.plotAreas.push(p);

系列がどのプロット領域にプロットされるかは、その系列がX軸またはY軸のどちらに対してプロットされるかによって決まることに注意してください。このため、軸を別のプロット領域に移動すると、系列も一緒に移動します。

プロット領域のレイアウトについて

プロット領域のレイアウトは、いくつかの行と列から成るグリッドレイアウトに基づいています。たとえば、垂直に積み重ねられた3つのプロット領域を作成するには、それぞれのrowプロパティを0、1、2に設定します。

水平に積み重ねられた3つのプロット領域を作成するには、それぞれのcolumnプロパティを0、1、2に設定します。また、行と列の両方を使用して、2 x 2のレイアウトを作成することもできます。

各プロット領域のサイズを制御するには、そのwidthプロパティとheightプロパティを設定します。プロット領域の間に余白を追加するには、スペーサーとなる空の領域を追加します。

// スペーサーとなるプロット領域を作成します
p = new chart.PlotArea();
p.row = theChart.plotAreas.length;
p.name = 'spacer';
p.height = 25;
theChart.plotAreas.push(p)

プロットマージンを使用して複数のチャートを積み重ねる

複数のプロット領域を持つチャートを1つのチャートとして作成する方法として、複数のチャートコントロールを積み重ねることもできます。チャートを適切に並べるには、plotMarginプロパティを使用します。

たとえば、垂直に積み重ねられた2つのチャートのY軸を揃えるには、両方のplotMarginプロパティのleft値が「120」となるように設定します。

myChart1.plotMargin = 'NaN 120 10 60'; // top, right, bottom, left
myChart2.plotMargin = '10 120 NaN 60'; // top, right, bottom, left

プロットマージン