2013년 8월 4일 일요일

Android グラフチャートライブラリ - Essence Chart(エッセンス チャート)ライブラリの始め方

アプリを開発する際に、格好いいグラフやチャートを入れてみるのはいかかですか?

Android Essence Chart(エッセンス チャート) ライブラリを使うと2D/3Dのグラフやチャートを簡単に作ることができます。

この文書は Essence Chart(エッセンス チャート) というライブラリを始めて使う開発者が分かりやすく学べるように作成されたガイドです。


Essence Chart(エッセンス チャート)の特徴は以下となります。

  • Essence Chart ライブラリは様々なグラフやチャートをサポートしています.                                   サポートするグラフやチャートの種類は Essence Chart がサポートするグラフの種類 にて確認できます.
  • Essence Chart ライブラリはファイルサイズが小さいです。
  • Android用 ライブラリの場合、ファイルサイズは3MB位です。
  • Essence Chart ライブラリは様々なOSを対応しております。
    現在 Android向けのみ提供しておりますが、今後、Window向け, iOS向けも提供する予定です。.
  • Essence Chart ライブラリは無料で使えます.
    Essence Chart
    ライブラリのライセンスは Essence Chart(エッセンス チャート) ライセンスにて 確認できます.


エッセンスチャートを始めるためには必ず Essence Chart SDKをインストールしなければなりません。
インストールは Essence Chart(エッセンスチャート) SDK インストールにて確認できます.
image

Android 始めよう – 1段階(Chartの生成)

Essence Chart ライブラはAndroidで使えるJAR(Java Archive)を提供します。
Android
で楽で簡単にChartを生成することができます。
現在、Androidでは以下のようにサポートされております。
  • ·         SDKをインストールするプログラム
    ·         AndroidJARファイルを提供
    ·         サポート Device : armebai-v7, armebai(armebaiは今後サポートされる予定)
    ·         SDK Demo APP 提供(Google Playに登録される予定)
    ·         Min SDK Version : Android 2.3.3(API 10)
    ·         動作が確認できた Device
    o    サムスン GALAXY S2(Android 4.1.2, Jelly bean)
    o    サムスン GALAXY S3(Android 4.1.2, Jelly bean)
    o    サムスン GALAXY Note 10.1(Android 4.1.2, Jelly bean)
    o    LGエレクトロニクス Optimus G pro (Android 4.1.2, Jelly bean)
    o    グーグル Nexus7(Android 4.2.2, Jelly bean)
    o    グーグル Nexus10(Android 4.2.2, Jelly bean)
    ·         一部のDeviceで正常に動作できない場合があります。
    o    現在armebai-v7のみサポートできます。
    o    Android OSのパージョンによって上手く起動できない場合があります。
    ·         お問い合わせはブログへコメントを残すことでお願いします。

    Android
    を始める前に次の項目をご確認してください。
    ·         Eclipseのインストールを確認
    o    Eclipse Classic 3.7.2で始めようが作成されております。
    o    他のパージョン(上位バージョン)で開発するのもできますが、この文書は3.7.2を基準として説明されてますので、メニューや項目が異なる場合があります。
    o    Eclipseのインストールに関してはネット上にあるEclipseインストールしようなどのページをご参照してください。.
    ·         Android SDKのインストールを確認
    o    Androidを始めようはAndroidSDKがインストールされていないと進めることができません。
    o    Androidの開発者のサイトでダウンロードできます。
    o    Android SDKに関してはネット上にあるAndroid SDKインストール関連サイトをご参照してインストールしてください。
    ·         Essence Chart のインストールを確認
    o    Androidを始めようはEssence Chart SDKがインストールされていないと進めることができません。
    o    Essence Chart(エッセンスチャート) SDKのインストール をご参照してインストールを確認してください。.

    下記のイメージで表記されたバージョンはアップデートによりバージョンが異なる場合があります。

Androidアプリを生成する


eclipse.exeを実行してEclipseを起動します。

image

File –> New –> Other を選択します。
image

Android –> Android Application Projectを選択し“Next” ボタンを押します。
image

Application Name, Project Name, Package Nameを入力します。
Minimum Required SDK
項目は API 9: Android 2.3(Gingerbread)を選択します。
Target SDK, Compile With, Theme
は状況に合わせて選択します。
“Next”
ボタンを押します
image


Create custom launcher icon, Create activity, Create Project in Workspace
項目にチェックをかける.
”Next”
ボタンを押します。
image

アイコンのイメージの情報を設定する。.
”Next”
ボタンを押します。
image

Create ActiveにチェックをかけBlankActivityを選択する。
”Next”
ボタンを押します。
image

Activeity Name, Layout Name 項目の毎に値を入力する。
(始めようではデフォールト値を使うので、もし他の値を使うと項目名が異なる場合があります。)
”Finish”
を押します.
image

Essence ChartSDKをコピー


インストールしたEssence Chart SDKのフォルダでJARファイルlibraryフォルダをコピーする。

Windowsエクスプローラを実行し、 Essence Chart SDKフォルダへ移動する。
デフォルトインストールパスは以下になります。

·         Window 32bit : C:\Program Files\Essence Chart SDK\sdk\android

·         Window 64bit : C:\Program Files (x86)\Essence Chart SDK\sdk\android

image

“armebai-v7a” フォルダと“essence.chart.0.7.6.jar” ファイルをコピーする。 image

コピーしたファイルをEclipseChart Projcetlibsというフォルダにコピーする。
image

コピーが終わったら、 libs ファルダに“armebai-v7a” ファルダと“essence.chart.0.7.6.jar” ファイルが子ぷーされたことを確認する。
 image


Layoutchartを追加する

Eclipse에서 res/layout/activity_main.xmlファイルを選択する。
(activity_main.xml
Projcetを生成する時に指定したファイルである)
image

activeity_main.xmlactivity_main.xmlのタブを選択する。
(Graphical Layout
の隣にあるactivity_main.xmlタブを選択)
image

TextViewの項目を次のように変更する。
変更の前

変更の後
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />
</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
    <com.essence.chart.Chart
        android:id="@+id/chart01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>


imageimage

修正した内容を保存する。
メニューのProject->Cleanを押下し、Clean all projectsを選択する。
image

Chartのアプリを実行

保存されたProjectを実行し、Chartが正常的に生成が完了されたのか確認する。

Eclipse
toolbarRunボタンを押します。
Run Asの窓が立ち上がると“Android Application”を選択後、“OK”ボタンを選択する。
image

正常的にビルドされたら Android Device Chooserが表示されます。.
Android Device Chooserで望むDeviceを選択し、“OK” ボタンを押します。

image

正常的に実行されたら Deviceに下記のようなChartアプリが実行されます。

·         サムスン GALAXYS2

image

  • サムスン GALAXY Note 10.1
image

  • Google Nexus7
image

댓글 9개:

  1. Thank you for your awesome work.

    But I have an issue. When legend is too long, legend overlays chart and you can't see chart because of legend. I will put an on off button for legend but can we get legend as a view and add it as an another view to outside of the chart?

    답글삭제
    답글
    1. We don't have interface get legend as a view. But you can get information from legend property.
      So You can draw legend as your way!

      삭제
    2. Ok. Thanks :) and one more thing. How can i get the information?

      삭제
    3. I've checked legend properties but i found that is not implemented yet. --;;

      I have schedule to upgrade essence chart from March 2014. So please wait until next version.

      삭제
    4. 작성자가 댓글을 삭제했습니다.

      삭제
  2. 블로그 관리자가 댓글을 삭제했습니다.

    답글삭제
  3. 블로그 관리자가 댓글을 삭제했습니다.

    답글삭제
  4. 차트관련 자료찾던중 좋은 라이브러리제공해주셔서 감사합니다.다름이 아니라 각각의 막대그래프색깔을 제가 원하는 색으로 바꾸고 싶은데어떤 API 제공이 안되있는데 업데이트 하실생각 없으신가요

    답글삭제
    답글
    1. 차트 데이터의 색상 변경 기능은 다음 업데이트에서 지원할 예정입니다.

      삭제