aiCharts : チャート用XMLファイルの宣言方法

導入

aiChartsライブラリは簡単にチャートの作りと見た目を宣言する手段を提供しています。開発者にはチャートをXMLファイルから定義する手段が与えられ、それをAndroidのレイアウトXMLファイルとして再び利用することができます。これはXMLファイルを必須条件として使わなければならないというわけではありませんが、おすすめしています。

Eclipse環境の設定

Eclipse IDEにはXMLエディタがあり、XMLの宣言を見ることができます。エディタに正しくチャートの形を認識させるためには、EclipseでPreferences > XML > XML catalog > Add and enter aiCharts.xsd schema location that is included in aiCharts SDKのように操作をしてください。

XMLチャートの宣言

チャートの形式について宣言をするには以下のように操作してください。

  • XMLファイルでチャートの説明をする(下記XML参照)
  • XMLファイルをプロジェクトの/res/xml/ に追加する
  • レイアウトファイルでChartViewのチャート属性を@xml/<your_xml_file>としてセットする。

XMLチャートの定義はChartViewにレイアウトインフレーション(layout inflation)(ほとんどの場合、Activity.setContentView() 手法が実行された時)がされることで反映されます。

以下のXMLチャートサンプルを参考にしてください。

<?xml version="1.0" encoding="UTF-8"?>
<chart>
    <title text="Chart XML Sample"/>
    <area grid="@drawable/bk_grid">
        <area.xaxis position="Top"/>
    </area>
    <series type="Column" showlabel="true" points="20, 10, 40, 30, 50"/>
    <legend dock="Right"/>
</chart>

このXMLはチャートのタイトル、背景(アプリケーションリソースファイルの:drawable bk_grid.png)、column タイプのseriesと凡例を定義しています。このXMLをChartViewに反映させると以下のようなグラフが完成します。

グラフのプレビュー

XMLファイル形式

論理的なXMLチャート形式はarea, series, legend, titleで表現されています。すべての要素は対応する属性で指定されます。もし以下の要素がXMLチャートで定義されていない場合、チャート作成エンジンで自動的に作成されます。

形式は通常以下のようになります。

<?xml version="1.0" encoding="UTF-8"?>
<chart>
    <area>
      <area.xaxis/>
      <area.yaxis/>
    <area/>
    <series/>
    <legend/>
    <title/>
</chart>

サポートされている属性は以下の通りです。

Area属性

Chartの子要素です。以下の属性がサポートされています。

Name Type Description
grid Drawable resource id Defines drawable reference to image that aiCharts will use to render area's grid background.
background Drawable resource id Defines drawable reference to image that aiCharts will use to render area's background.
name String Defines area name.

X軸とY軸の属性

どちらもarea要素の子属性になります。

Name Type Description
position ChartAxis.Position enum names Defines axis position. Used to change default position of axis.
visible Boolean Defines axis visibility. True by default.
labels_visible Boolean Defines labels visibility. True by default. Used to restrict axis from drawing itпїЅs labels.
labels_mode ChartAxis.LabelsMode enum names Defines labels generation mode.
title String Defines axis title name.
ticks_mode ChartAxis.TickMarkMode enum names Defines tick mode.
ticks_size Integer Defines tick size. Used to customize axis appearance.
format MessageFormat pattern Defines labels format. Used for custom labels scenarios.
spacing Integer Defines distance between axis elements.
padding Integer Defines distance between axis and area.
grid_linescolor Integer Defines grid lines color.
grid_visible Boolean Defines grid visibility. True by default. Used to restrict axis from drawing itпїЅs grid.
scale_min Double Defines minimal value of axis scale.
scale_max Double Defines maximal value of axis scale.
scale_interval Double Defines interval between labels.
scale_intervalType ChartAxisScale.IntervalType enum names Defines type of interval between labels.

series属性

シリーズは視覚化の各パーツを担っています。一般的な目的はシリーズの色、幅、タイプなどを定義するためです。

Name Type Description
name String Defines series name. Legend uses this name to display series data. Generally, thereпїЅs no need to set this attribute if access series by name and legend is not required.
area String Defines area name. Tells series which area must use it. If this attribute not set, first area will use this series and draw it
legend String Defines legend name. This is typically used to allow several legends in a single area. Setting legend name, tells series which legend it belongs to.
type String Defines ChartType name.
points coma separated double array Defines Y values of points. For most cases, this attribute may be used for static data representation.
background Drawable resource id Defines background resource. This drawable can be assigned just as much as any other: @drawable/<resource_id>
filter Boolean Enables color filter for background drawable.
marker Drawable resource id Defines marker drawable resource.
markerSize One or two coma- separated integers пїЅx, yпїЅ Defines marker size.
showlabel Boolean Defines label visibility. Identifies whether labels belonging to this series should be visible.
color Integer color value Defines series color.
border Integer color value Defines series border color.
linewidth Integer Defines series border or line width. This attribute is treated differently depending on chart type.
halign Alignment enum names Defines series label horizontal position.
valign Alignment enum names Defines series label vertical position.

legend属性

凡例はチャートの上、下、またはチャートの近くで各シリーズが何を表しているのかを説明します。

Name Type Description
name String Defines legend name.
background Drawable resource id Defines background resource. This drawable can be assigned just
as much as any other: @drawable/<resource_id>.
dock ChartLeyoutElement.Dock
enum names
Defines legend position.
visible Boolean Defines legend visibility.

title属性

タイトルはチャートに対するさらなる情報を提示します。

Name Type Description
image Drawable resource id Defines image resource.
text String Defines title text.
dock ChartLeyoutElement.Dock enum names Defines title position.
halign Alignment enum names Defines image horizontal position.
valign Alignment enum names Defines image vertical position.
visible Boolean Defines title visibility.

結論

Android向けのチャート作成エンジン、aiChartsはJavaのグラフ作成市場の中で1番人気があり、Androidのためにデザイン、最適化されています。他のJavaのグラフ作成エンジンはAndroidにも対応はしていますが、開発者にとって他の作成エンジンより大きな利点があります。aiChartsはAndroid開発環境にネイティブで対応しており、インストールが簡単で、チュートリアルやサンプルが充実していますので、より簡単に組み込みできます。

チャートがどう見えるかをXMLで定義できることで開発者に大きな自由が与えられています。チャートのUIとロジックを分離することはアプリケーションをより読みやすく、また堅牢にします。

その他のアイデアはサンプルをご覧ください。また、質問はサポートフォーラムでお尋ねください。