Xamarin.Forms のドキュメント
複数の Y 軸
コントロール > FlexChart > 機能 > 複数の Y 軸

複数の軸を FlexChart コントロールに追加し、そのプロパティをカスタマイズできます。この機能を使用すると、単一の FlexChart インスタンスに、X 軸が同じで Y 軸が異なる 2 つの系列を追加できます。さらに外観をカスタマイズするには、異なるチャートタイプを選択することで 2 つの系列を区別できます。

次の図は、通常の X 軸で月を表示し、左 Y 軸と右 Y 軸で 2 つの異なる系列要素、Temperature（温度）と Precipitation（降水）を表示する FlexChart コントロールです。

Multiple y axis

以下の手順は、FlexChart コントロールに複数の Y 軸を追加する方法について具体的に説明します。

  1. 新しい Cross Platform App を作成し、MainPage.xaml ページを開きます。
  2. MainPage.xaml ページで、既存のコードを次のものに置き換えて、Precipitation と Temperature という 2 つの系列要素を表示する Flexchart コントロールを作成します。
    XAML
    コードのコピー 
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:c1="clr-namespace:C1.Xamarin.Forms.Chart;assembly=C1.Xamarin.Forms.Chart"
             x:Class="QuickstartChart.MultipleYAxes">
  <c1:FlexChart x:Name="flexChart" BindingX="MonthName">
    <c1:FlexChart.Series>
      <c1:ChartSeries Binding="Precipitation" SeriesName="Precip"/>
      <c1:ChartSeries Binding="Temp" ChartType="SplineSymbols" SeriesName="Avg. Temp">
        <c1:ChartSeries.AxisY>
          <c1:ChartAxis Position="Right" Min="0" Max="80" MajorUnit="10" 
Title="温度 (F)" AxisLine="False" MajorGrid="False">
            <c1:ChartAxis.TitleStyle>
              <c1:ChartStyle Stroke="#fbb258" FontSize="20"/>
            </c1:ChartAxis.TitleStyle>
          </c1:ChartAxis>
        </c1:ChartSeries.AxisY>
      </c1:ChartSeries>
    </c1:FlexChart.Series>

    <c1:FlexChart.AxisY>
      <c1:ChartAxis Min="4" Max="20" MajorUnit="2" MajorGrid="True" 
Title="降水 (インチ)" AxisLine="False">
        <c1:ChartAxis.TitleStyle>
          <c1:ChartStyle Stroke="#88bde6" FontSize="20"/>
        </c1:ChartAxis.TitleStyle>
      </c1:ChartAxis>
    </c1:FlexChart.AxisY>
  </c1:FlexChart>
</ContentPage>
  3. ソリューションエクスプローラーで、MultipleYAxes.xaml.cs ファイルを開きます。このファイルに次のコードを追加すると、実行時に Flexchart コントロールに表示されるデータが追加されます。
    C#
    コードのコピー 
     public partial class MultipleYAxes : ContentPage
    {
        public MultipleYAxes()
        {
            InitializeComponent();

            this.flexChart.ItemsSource = GetWeatherData();
            this.flexChart.LegendPosition = ChartPositionType.None;
        }

        public IEnumerable<WeatherData> GetWeatherData()
        {
            List<WeatherData> weatherData = new List<WeatherData>();
            string[] monthNames = new string[] { "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" };
            //double[] tempData = new double[] { 24, 30, 45, 58, 68, 75, 83, 80, 72, 62, 47, 32 };
            Random random = new Random();

            for (int i = 0; i < monthNames.Length; i++)
            {
                WeatherData wd = new WeatherData();
                wd.MonthName = monthNames[i];
                wd.Precipitation = random.Next(8, 18) + random.NextDouble();
                wd.Temp = Math.Tan(i * i) + 70;
                weatherData.Add(wd);
            }
            return weatherData;
        }
    }

    public class WeatherData
    {
        public string MonthName { get; set; }
        public double Temp { get; set; }
        public double Precipitation { get; set; }
    }
  4. ［F5］キーを押してプロジェクトを実行すると、2 つの Y 軸が共通の X 軸に対して表示されます。

 

 

Copyright © GrapeCity, Inc. All rights reserved.