バージョン

複数軸の使用

XamDataChart™ コントロールは、チャートで軸ビジュアルを定義するために Axis オブジェクトを使用します。同じチャート プロット領域で複数の軸を追加できます。チャート コントロールに追加する各軸については、チャート プロット領域に関連する場所を指定できます。詳細については、 軸ラベルの設定トピックを参照してください。複数軸のサポートに加えて、チャート コントロールで定義された Series 間で軸を共有することができます。

このセクションでは、チャート プロット領域の左側と右側に 2 つの NumericYAxis を追加する方法と、LineSeries および FinancialPriceSeries シリーズ間で CategoryXAxis を共有する方法を学習します。

XAML の場合:

<ig:XamDataChart x:Name="DataChart"
                 BindingContext="{StaticResource DataSource}"
                 IsHorizontalZoomEnabled="True"
                 IsVerticalZoomEnabled="True">
<!-- ========================================================================== -->
    <ig:XamDataChart.Axes>
        <ig:CategoryXAxis x:Name="xAxis"
                          LabelLocation="OutsideTop"
                          ItemsSource="{Binding}"
						  Label="Date" />
        <ig:NumericYAxis x:Name="yAxis1"
                         LabelLocation="OutsideLeft" />
        <ig:NumericYAxis x:Name="yAxis2"
                         LabelLocation="OutsideRight" />
    </ig:XamDataChart.Axes>
<!-- ========================================================================== -->
    <ig:XamDataChart.Series>
        <ig:LineSeries XAxis="{x:Reference xAxis}"
                       YAxis="{x:Reference yAxis2}"
                       ItemsSource="{Binding}"
                       ValueMemberPath="Volume" />
        <ig:FinancialPriceSeries XAxis="{x:Reference xAxis}"
                                 YAxis="{x:Reference yAxis1}"
                                 ItemsSource="{Binding}"
                                 OpenMemberPath="Open"
                                 CloseMemberPath="Close"
                                 HighMemberPath="High"
                                 LowMemberPath="Low" />
    </ig:XamDataChart.Series>
</ig:XamDataChart>

C# の場合:

var DataChart = new XamDataChart();

var xAxis = new CategoryXAxis()
{
    ItemsSource = data,
    Label = "Date"
};
var yAxis1 = new NumericYAxis()
{
    LabelLocation = AxisLabelsLocation.OutsideLeft
};
var yAxis2 = new NumericYAxis()
{
    LabelLocation = AxisLabelsLocation.OutsideRight
};
var series1 = new LineSeries()
{
    XAxis = xAxis,
    YAxis = yAxis2,
    ItemsSource = data,
    ValueMemberPath = "Volume"
};
var series2 = new FinancialPriceSeries()
{
    XAxis = xAxis,
    YAxis = yAxis1,
    ItemsSource = data,
    CloseMemberPath = "Close",
    OpenMemberPath = "Open",
    HighMemberPath = "High",
    LowMemberPath = "Low"
};

DataChart.Axes.Add(yAxis1);
DataChart.Axes.Add(yAxis2);
DataChart.Axes.Add(xAxis);
DataChart.Series.Add(series1);
DataChart.Series.Add(series2);

Visual Basic の場合:

Dim xAxis As New CategoryXAxis()
xAxis.DataSource = data
xAxis.ItemsSource = data
xAxis.Label = "{Date}"
xAxis.Label = "Date"

Dim yAxis1 As New NumericYAxis()
yAxis1.LabelLocation = AxisLabelsLocation.OutsideLeft
yAxis1.LabelSettings.Location = AxisLabelsLocation.OutsideLeft

Dim yAxis2 = new NumericYAxis()
yAxis2.LabelLocation = AxisLabelsLocation.OutsideRight
yAxis2.LabelSettings.Location = AxisLabelsLocation.OutsideRight

Dim series1 As New LineSeries()
series1.XAxis = xAxis
series1.YAxis = yAxis2

Dim series2 As New FinancialPriceSeries()
series2.XAxis = xAxis
series2.YAxis = yAxis1

DataChart.Axes.Add(yAxis1)
DataChart.Axes.Add(yAxis2)
DataChart.Axes.Add(xAxis)
DataChart.Series.Add(series1)
DataChart.Series.Add(series2)

以下の画像は、チャート コントロールで 2 つのシリーズ間で共有される 2 つの NumericYAxis 軸および 1 つの CategoryXAxis を示します。

xamWebDataChart Axes Multiple Axes 01.png