aiChartsサンプル:縦棒チャート

概要

縦棒チャートは縦棒の長さによって数値が表わされているチャートです。それぞれのデータの区分及びカテゴリーはx軸に示されています。

縦棒チャートはさらに3つに細分化されています。通常の縦棒チャート、積み上げ縦棒チャート、そして積み上げ縦棒チャート100%です。このグラフは時間の経過と共に変化していくデータを見せるのに最適です。縦棒チャートはよくデータのグループ間の違いを見るために用いられます。もし3グループおよび区分以上を一度に見せるのならば縦棒チャートを使うのがいいでしょう。

縦棒チャートを作るには

aiChartsは少ないコードで簡単に縦棒チャートを作ることができます。
縦棒チャートを作るには、まずはChartSeriesのインスタンスを作り、チャートタイプ(作図タイプ)をColumnに設定し、データをセットします。

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

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

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

import com.artfulbits.aiCharts.ChartView;
import com.artfulbits.aiCharts.Base.*;
import com.artfulbits.aiCharts.Base.ChartAxis.LabelsMode;

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

		String[] labels = {"Boxing", "Kickboxing", "Karate", "Street fighting", "RUN!!!"};
		double[] efficiency = { 35, 40, 30, 50, 100 };

		ChartView chartView = (ChartView) findViewById(R.id.chartView);
		ChartSeries series = chartView.getSeries().get(0);

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

			point.setAxisLabel(labels[i]);
		}

		ChartArea area = chartView.getAreas().get(0);

		area.getDefaultXAxis().setLabelsMode(LabelsMode.SeriesLabels);
	}
}

XMLチャート


<?xml version="1.0" encoding="utf-8"?>
<ai:chart xmlns:ai="http://www.artfulbits.com/android/aiCharts">
	<ai:area>
	 <area.xaxis title="Form of Self-Defence"/>
	 <area.yaxis title="Efficiency" scale_min="0" labels_visible="false"/>
	</ai:area>

	<ai:series type="Column"/>
	<ai:title text="Self-Defence efficiency" dock="Top"/>
</ai:chart>