aiChartsサンプル:じょうご型チャート

概要

じょうご型チャートはすべてを合計した際に100%になるデータを表示できます。全体の中で占める割合をチャートで表すことができ、このグラフは座標の設定をする必要はありません。じょうご型チャートはしばしば各販売過程においてどれほどの利益を見込めるかを表すのに使われています。さらにこのチャートは団体の売り上げにおいて、どこに潜在的な問題があるかを見分けることもできます。

じょうご型チャートは100%から始まり低いパーセンテージで終了するグラフです。どこかの部分で特記すべき違いが起きた場合、どのような割合でそれが起こったのかを分かりやすく知ることができます。例えば、じょうご型チャートはウェブサイトへのアクセス者の傾向を見せることにも使うことができます。

じょうご型チャートを作るには

じょうご型チャートを作るには、まずはChartSeriesのインスタンスを作り、チャートタイプ(作図タイプ)をFunnelに設定し、データをセットします。

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

サンプルダウンロードはこちら(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.funnelsample;

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

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

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);

		ChartPalette pallete = ChartPalette.rangePalette(0xFFD10508, 0xFFD68F5A, 4);

		chartView.setPalette(pallete);

		double[] ingredients = {1.5, 3, 1.5, 4};
		String[] ingredientNames = { "Fresh Lime juice",
		    "Cranberry juice", "Cointreau", "Vodka" };

		for (int i = 0; i < ingredientNames.length; i++)
		{
			ChartPoint point = series.getPoints().addXY(i, ingredients[i]);

			point.setLabel(ingredientNames[i]);
		}
	}
}

XMLチャート


<?xml version="1.0" encoding="utf-8"?>
<ai:chart xmlns:ai="http://www.artfulbits.com/android/aiCharts">
	<ai:area/>
	<ai:series type="Funnel" showlabel="true"/>
	<ai:title text="Cosmopolitan (cocktail)" dock="Top"/>
</ai:chart>