複合チャート

FlexChart に複数の系列を追加し、系列ごとに異なるチャートタイプを設定できます。このようなチャートは、1 つのキャンバスで複雑なチャートデータを分析する場合に役立ちます。同じデータを異なる方法で視覚化して使用したり、関連するデータを一緒に表示して傾向を示すことができます。

次の図は、複数の系列を持つ FlexChart を示しています。

Basic mixed chart

次のコード例は、さまざまなチャートタイプを使用してチャートの複数のインスタンスを作成し、それらを FlexChart に追加する方法を示します。

新しいクラス (ChartPoint.cs) をアプリケーションの DataModel フォルダに追加します。

CS	コードのコピー
public class ChartPoint : Java.Lang.Object { static Random random = new Random(); private const long serialVersionUID = 1L; private String name; private int sales; private int expenses; private int downloads; public string Name { get { return name; } set { name = value; } } public int Sales { get { return sales; } set { sales = value; } } public int Expenses { get { return expenses; } set { expenses = value; } } public int Downloads { get { return downloads; } set { downloads = value; } } public ChartPoint() { } public ChartPoint(String name, int sales, int expenses, int downloads) { this.Name = name; this.Sales = sales; this.Expenses = expenses; this.Downloads = downloads; } // ChartPoint型のランダムオブジェクトのリストを作成するメソッド public static IList<object> GetList() { List<object> list = new List<object>(); int n = 6; // number of series elements String[] countries = { "アメリカ", "ドイツ", "イギリス", "日本", "イタリア", "ギリシャ", "インド", "カナダ" }; for (int i = 0; i < n; i++) { list.Add(new ChartPoint(countries[i], random.Next(20000), random.Next(20000), random.Next(20000))); } return list; } public static ObservableCollection<ChartPoint> getLogList() { ObservableCollection<ChartPoint> list = new ObservableCollection<ChartPoint>(); int n = 6; // 系列要素の数 String[] countries = { "アメリカ", "ドイツ", "イギリス", "日本", "イタリア", "ギリシャ", "インド", "カナダ" }; Random random = new Random(); for (int i = 0; i < n; i++) { int scale = random.Next(14); scale = (int)Math.Exp((double)scale); list.Add(new ChartPoint(countries[i], random.Next(scale), random.Next(scale), random.Next(scale))); } return list; } /** * 固定要素サイズでChartPoint型のランダムオブジェクトのリストを作成するメソッド * * @param size * - 系列要素のサイズ。 * */ public static IList<object> GetList(int size) { IList<object> list = new List<object>(); Random random = new Random(); for (int i = 0; i < size; i++) { list.Add(new ChartPoint(i + "", random.Next(20000), random.Next(20000), random.Next(20000))); } return list; } }

コードのコピー

public class ChartPoint : Java.Lang.Object
{
    static Random random = new Random();
    private const long serialVersionUID = 1L;

    private String name;
    private int sales;
    private int expenses;
    private int downloads;
    
    public string Name
    {
        get
        {
            return name;
        }
        set
        {
            name = value;
        }
    }

    public int Sales
    {
        get
        {
            return sales;
        }
        set
        {
            sales = value;
        }
    }

    public int Expenses
    {
        get
        {
            return expenses;
        }
        set
        {
            expenses = value;
        }
    }

    public int Downloads
    {
        get
        {
            return downloads;
        }
        set
        {
            downloads = value;
        }
    }

    public ChartPoint()
    {
    }

    public ChartPoint(String name, int sales, int expenses, int downloads)
    {
        this.Name = name;
        this.Sales = sales;
        this.Expenses = expenses;
        this.Downloads = downloads;
    }

    // ChartPoint型のランダムオブジェクトのリストを作成するメソッド
    public static IList<object> GetList()
    {
        List<object> list = new List<object>();
        int n = 6; // number of series elements
        String[] countries =
        { "アメリカ", "ドイツ", "イギリス", "日本", "イタリア", "ギリシャ", "インド", "カナダ" };

        for (int i = 0; i < n; i++)
        {
            list.Add(new ChartPoint(countries[i], random.Next(20000), random.Next(20000), random.Next(20000)));
        }
        return list;
    }

    public static ObservableCollection<ChartPoint> getLogList()
    {
        ObservableCollection<ChartPoint> list = new ObservableCollection<ChartPoint>();
        
        int n = 6; // 系列要素の数
        String[] countries =
        { "アメリカ", "ドイツ", "イギリス", "日本", "イタリア", "ギリシャ", "インド", "カナダ" };
        Random random = new Random();

        for (int i = 0; i < n; i++)
        {
            int scale = random.Next(14);
            scale = (int)Math.Exp((double)scale);
            list.Add(new ChartPoint(countries[i], random.Next(scale), random.Next(scale), random.Next(scale)));
        }
        return list;
     }

    /**
     * 固定要素サイズでChartPoint型のランダムオブジェクトのリストを作成するメソッド
     * 
     * @param size
     *            - 系列要素のサイズ。
     * */
    public static IList<object> GetList(int size)
    {
        IList<object> list = new List<object>();
        Random random = new Random();

        for (int i = 0; i < size; i++)
        {
             list.Add(new ChartPoint(i + "", random.Next(20000), random.Next(20000), random.Next(20000)));
        }
        return list;
    }
}

複合チャートを作成するには、次のコードを　MainActivity.cs に追加します。

CS	コードのコピー
public class MainActivity : Activity { private FlexChart mChart; protected override void OnCreate(Bundle savedInstanceState) { base.OnCreate(savedInstanceState); // 「メイン」レイアウトリソースからビューを設定する SetContentView(Resource.Layout.Main); // ウィジェットを初期化する mChart = (FlexChart)FindViewById(Resource.Id.flexchart); Chartinitialization.InitialDefaultChart(mChart, ChartPoint.GetList()); (mChart.Series[2] as ChartSeries).ChartType = ChartType.Line; } } public class Chartinitialization { public static void InitialDefaultChart(FlexChart flexChart,IList<object> itemsSource) { ChartSeries seriesSales = new ChartSeries(); seriesSales.Chart = flexChart; seriesSales.SeriesName = "販売"; seriesSales.Binding = "Sales"; ChartSeries seriesExpenses = new ChartSeries(); seriesExpenses.Chart = flexChart; seriesExpenses.SeriesName = "費用"; seriesExpenses.Binding = "Expenses"; ChartSeries seriesDownloads = new ChartSeries(); seriesDownloads.Chart = flexChart; seriesDownloads.SeriesName = "ダウンロード"; seriesDownloads.Binding = "Downloads"; flexChart.BindingX = "Name"; // リストに系列を追加する flexChart.Series.Add(seriesSales); flexChart.Series.Add(seriesExpenses); flexChart.Series.Add(seriesDownloads); flexChart.ItemsSource = itemsSource; flexChart.AxisX.MajorGridStyle.FontSize = 0; flexChart.AxisX.MinorGridStyle.FontSize = 1; } }

コードのコピー

public class MainActivity : Activity
{
    private FlexChart mChart;

    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);

        // 「メイン」レイアウトリソースからビューを設定する
        SetContentView(Resource.Layout.Main);

        // ウィジェットを初期化する
        mChart = (FlexChart)FindViewById(Resource.Id.flexchart);

        Chartinitialization.InitialDefaultChart(mChart, ChartPoint.GetList());
        (mChart.Series[2] as ChartSeries).ChartType = ChartType.Line;
    }
}
        
public class Chartinitialization
{
    public static void InitialDefaultChart(FlexChart flexChart,IList<object> itemsSource)
    {
        ChartSeries seriesSales = new ChartSeries();
        seriesSales.Chart = flexChart;
        seriesSales.SeriesName = "販売";
        seriesSales.Binding = "Sales";

        ChartSeries seriesExpenses = new ChartSeries();
        seriesExpenses.Chart = flexChart;
        seriesExpenses.SeriesName = "費用";
        seriesExpenses.Binding = "Expenses";

        ChartSeries seriesDownloads = new ChartSeries();
        seriesDownloads.Chart = flexChart;
        seriesDownloads.SeriesName = "ダウンロード";
        seriesDownloads.Binding = "Downloads";

        flexChart.BindingX = "Name";
        // リストに系列を追加する
        flexChart.Series.Add(seriesSales);
        flexChart.Series.Add(seriesExpenses);
        flexChart.Series.Add(seriesDownloads);

        flexChart.ItemsSource = itemsSource;
        flexChart.AxisX.MajorGridStyle.FontSize = 0;
        flexChart.AxisX.MinorGridStyle.FontSize = 1;
    }
}