バージョン

複数軸の使用

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

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

XAML の場合:

<ig:XamDataChart x:Name="DataChart"  >
<!-- ========================================================================== -->
    <ig:XamDataChart.Axes>
        <ig:CategoryXAxis x:Name="xAxis" ItemsSource="{Binding}"Label="{}{Date:MMM dd}">
            <ig:CategoryXAxis.LabelSettings>
                <ig:AxisLabelSettings Location="OutsideTop" />
            </ig:CategoryXAxis.LabelSettings>
        </ig:CategoryXAxis>
        <ig:NumericYAxis x:Name="yAxis1">
            <ig:NumericYAxis.LabelSettings>
                <ig:AxisLabelSettings Location="OutsideLeft" />
            </ig:NumericYAxis.LabelSettings>
        </ig:NumericYAxis>
        <ig:NumericYAxis x:Name="yAxis2" >
            <ig:NumericYAxis.LabelSettings>
                <ig:AxisLabelSettings Location="OutsideRight" />
            </ig:NumericYAxis.LabelSettings>
        </ig:NumericYAxis>
    </ig:XamDataChart.Axes>
    <!-- ========================================================================== -->
    <ig:XamDataChart.Series>
        <ig:LineSeries XAxis="{Binding ElementName=xAxis}"
                      YAxis="{Binding ElementName=yAxis2}">
        </ig:LineSeries>
        <ig:FinancialPriceSeries XAxis="{Binding ElementName=xAxis}"
                               YAxis="{Binding ElementName=yAxis1}">
        </ig:FinancialPriceSeries>
    </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

関連コンテンツ: