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

概要

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

折れ線チャートと共に面積チャートはデータを連続して表示できるグラフのタイプです。例えば、このグラフはローンの中で元金と利子の相対的な割合の変化を見ることができます。また、面積チャートにはスプライン面積、積み上げ面積、積み上げ面積100%の種類があります。

面積チャートを作るには

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

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

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

イメージ図

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

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

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 series1 = chartView.getSeries().get("Series1");
		ChartSeries series2 = chartView.getSeries().get("Series2");

		double[] data1 = { 82, 75, 96, 65, 87 };
		double[] data2 = { 37, 28, 43, 48, 56 };

		series1.getPoints().setData(data1);
		series2.getPoints().setData(data2);
	}
}

XMLチャート


<?xml version="1.0" encoding="utf-8"?>
<ai:chart xmlns:ai="http://www.artfulbits.com/android/aiCharts">
	<ai:area />

	<ai:series name="Series1" legend="Legend1" type="Area" color="#FF589AF1"/>
	<ai:series name="Series2" legend="Legend2" type="Area" color="#FFE5B059"/>

	<ai:legend name="Legend1" dock="Right"/>
	<ai:legend name="Legend2" dock="Left"/>
</ai:chart>