aiChartsサンプル:ドーナッツ型チャート

概要

ドーナッツ型チャートは円形のチャートでいくつかの部分に分けられています。それぞれの区分は相対的な大小、または頻度を表しています。ドーナッツ型チャートではその弧の長さ(したがってその中心角と面積も)の割合は全体の量と同じ割合になっています。すべての区分を足すとドーナッツ型になります。この形から「ドーナッツ型チャート」という名前が付けられました。ビジネス界およびマスメディアで広く使われている形のグラフですが科学または技術的な場面では滅多に使われていません。

ドーナッツ型チャートは全体のうち、どれだけの割合かを表すのに役立ちます。ドーナッツ型チャートは一つのデータを表すのに適しており、あまり多くの区分分け(特に小さいもの)が無い方がよりよく利用できます。このチャートはデータの性質を表すのには適していますが、それぞれの中心角を比べることも難しいので、量的なものを表すのには適していません。

ドーナッツ型チャートを作るには

ドーナッツ型チャートを作るには、まずはChartSeriesのインスタンスを作り、チャートタイプ(作図タイプ)をDoughnutに設定し、データをセットします。

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

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

イメージ図

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

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

import com.artfulbits.aiCharts.ChartView;
import com.artfulbits.aiCharts.Base.ChartSeries;
import com.artfulbits.aiCharts.Types.ChartDoughnutType;
import com.artfulbits.aiCharts.Types.ChartPieType.LabelStyle;

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 series = chartView.getSeries().get(0);

		String[] labels = { "milk", "yeast", "flour",
				"eggs", "butter", "salt", "water", "sugar" };
		int[] weights = {180, 12, 450, 100, 100, 10, 250, 250 };

		for (int i = 0; i < weights.length; i++)
			series.getPoints().addXY(i, weights[i]).setLabel(labels[i]);

		series.setAttribute(ChartDoughnutType.LABEL_STYLE, LabelStyle.OutsideColumn);
		series.setAttribute(ChartDoughnutType.OPTIMIZE_POINTS, Boolean.FALSE);
	}
}

XMLチャート


<?xml version="1.0" encoding="utf-8"?>
<ai:chart xmlns:ai="http://www.artfulbits.com/android/aiCharts">
    <ai:area />
    <ai:series type="Doughnut" showLabel="true"/>
    <ai:title text="Doughnut ingredients"/>
</ai:chart>