aiChartsサンプル:積み上げ縦棒100%チャート

概要

このチャートはそれぞれの区分に応じて積み上げられているデータですが、その割合が常に合計100%になるものです。積み上げ縦棒100%チャートはいくつもの連続したデータの時間と割合の関係を見るのに役立ちます。

このチャートを使用して月ごとのローンの支払いで元金と利子が何割になっているのかを時間の経過とともにみることができます。この例では、ローンの支払金額が100%を占めており、利子と元金はそれぞれひと月の中で積み重なったものを表しています。

積み上げ縦棒100%チャートを作るには

aiChartsは少ないコードで簡単に積み上げ縦棒100%チャートを作ることができます。
積み上げ縦棒100%チャートを作るには、まずはChartSeriesのインスタンスを2つ作り、チャートタイプ(作図タイプ)をStackedColumn100に設定し、それぞれの区分ごとにデータをセットします。

ソースコードは以下のようになります。

サンプルダウンロードはこちら(ZIP,438KB)

イメージ図

]

XML アクティビティレイアウト


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
  <com.artfulbits.aiCharts.ChartView
    android:id="@+id/chartView"
    chart="@xml/chart"
    android:background="@android:drawable/alert_dark_frame"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>
</LinearLayout>

Java


package com.artfulbits.aiCharts.stackedcolumn100sample;

import com.artfulbits.aiCharts.ChartView;
import com.artfulbits.aiCharts.Base.ChartSeries;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity
{
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		ChartView chartView = (ChartView) findViewById(R.id.chartView);

		ChartSeries bottomSeries = chartView.getSeries().get("bottom");
		ChartSeries topSeries = chartView.getSeries().get("top");

		double[] data1 = { 83, 57, 55, 35, 7, 16, 39, 41, 64, 68 };
		double[] data2 = { 1, 16, 18, 26, 82, 91, 73, 69, 50, 38 };

		bottomSeries.getPoints().setData(data1);
		topSeries.getPoints().setData(data2);
	}
}

XMLチャート


<?xml version="1.0" encoding="utf-8"?>
<ai:chart xmlns:ai="http://www.artfulbits.com/android/aiCharts">
	<ai:area/>
	<ai:legend/>
	<ai:series name="bottom" type="StackedColumn100"/>
	<ai:series name="top" type="StackedColumn100"/>
</ai:chart>