aiChartsサンプル:折れ線チャート

概要

折れ線チャート、または折れ線グラフはいくつものデータポイントを直線で繋げたタイプのグラフです。これは最もシンプルに2つのデータの関連性をまとめ、更にどのように従属しているかを見ることができます。折れ線チャートは金融関連のデータで使われる最も基本的なチャートです。このタイプのチャートはある一定の時間でどのような傾向があるのかを見ることができます。例えば株価の折れ線チャートは株価の終値を、ある一定期間プロットしたデータを線でつなげたものです。

折れ線チャートを作るには

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

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

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

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

XMLチャート


<?xml version="1.0" encoding="utf-8"?>
<ai:chart xmlns:ai="http://www.artfulbits.com/android/aiCharts">
	<ai:area>
		<area.xaxis grid_visible="false" labels_visible="false" title="Life"/>
		<area.yaxis grid_visible="false" labels_visible="false" title="Quality"/>
	</ai:area>
	<ai:series type="Line" points="0, 60, 40, 100"/>
	<ai:title text="Life gets better!!!" dock="Top"/>
</ai:chart>