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

概要

積み上げ横棒100%チャートは水平にいくつも同じ区分のものが積み上がっているものを指します。その積み上がった合計が必ず100%になります。積み上げ横棒100%チャートはそれぞれの棒の中の区分によってあらわされる絶対値を見せること、またそれぞれの棒の長さによって示されている値の合計を見ることができます。

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

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

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

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

イメージ図

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.StackBar100Sample;

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

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 arrowSeries = chartView.getSeries().get("arrow");
		ChartSeries boxSeries = chartView.getSeries().get("box");

		arrowSeries.getPoints().setData(new double[]{ 50, 62, 56, 47, 95, 87 });
		boxSeries.getPoints().setData(new double[]{ 38, 32, 22, 32, 34, 44 });
	}
}

XMLチャート


<?xml version="1.0" encoding="utf-8"?>
<ai:chart
	xmlns:ai="http://www.artfulbits.com/android/aiCharts">
	<ai:area/>
	<ai:series
		name="arrow"
		type="StackedBar100"
		filter="true"
		border="0"
		background="@drawable/arrow" />
	<ai:series
		name="box"
		type="StackedBar100"
		filter="true"
		border="0"
		background="@drawable/box" />
</ai:chart>