aiChartsサンプル:ステップ面積チャート

概要

面積チャートは量的なデータを視覚的に表示できるチャートです。このチャートは折れ線チャートをもとにしています。それぞれのデータの点を結んでいる線の下の部分を塗ることで値の変化を強調しています。軸と折れ線の間の空間は色、テクスチャー、ハッチング、またはアニメーションで塗りつぶされます。この多彩で視覚的な表示でさらにデータを区別することができます。

折れ線チャートと共に面積チャートはデータを連続して表示できるチャートのタイプです。例えばこのチャートを使いローンの期間中の元金と利子の割合の変化を時間の変化とともにみることができます。

ステップ面積チャートを作るには

ステップ面積チャートを作るには、まずはChartSeriesのインスタンスを作り、チャートタイプ(作図タイプ)をStepAreaに設定し、データをセットします。

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

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

イメージ図

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

import com.artfulbits.aiCharts.ChartView;
import com.artfulbits.aiCharts.Annotations.ChartAnnotationPosition;
import com.artfulbits.aiCharts.Annotations.ChartDrawableAnnotation;
import com.artfulbits.aiCharts.Base.ChartPoint;
import com.artfulbits.aiCharts.Base.ChartSeries;
import com.artfulbits.aiCharts.Enums.Alignment;

import android.app.Activity;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Typeface;
import android.graphics.drawable.Drawable;
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 series = chartView.getSeries().get(0);

		double[] ds = { 10, 20, 30, 40, 50, 60, 70, 80, 90, 90, 90 };

		for (int i = 0; i < ds.length; i++)
		{
			series.getPoints().addXY(i, ds[i]);
		}

		ChartPoint point = series.getPoints().get(series.getPoints().size() - 2);

		Paint labelPaint = new Paint();

		labelPaint.setTextSize(20);
		labelPaint.setAntiAlias(true);
		labelPaint.setColor(0xFFFFCC33);
		labelPaint.setShadowLayer(10, 0, 0, 0xFFFFDF00);
		labelPaint.setTypeface(Typeface.DEFAULT_BOLD);

		point.setLabel("Success!!!");
		point.setShowLabel(Boolean.TRUE);
		point.setVLabelAlignment(Alignment.Near);
		point.setMarkerPaint(labelPaint);

		Drawable drawable = getResources().getDrawable(R.drawable.man);
		ChartDrawableAnnotation annotation = new ChartDrawableAnnotation(drawable);

		annotation.setPosition(ChartAnnotationPosition.relativeToSeries(series.getName(), 3));

		chartView.getChart().getAnnotations().add(annotation);
	}
}

XMLチャート


<?xml version="1.0" encoding="utf-8"?>
<ai:chart xmlns:ai="http://www.artfulbits.com/android/aiCharts">
	<ai:area>
		<area.xaxis labels_visible="false"/>
		<area.yaxis labels_visible="false"/>
	</ai:area>
	<ai:series name="series1" type="StepArea" background="@drawable/background"/>
</ai:chart>