OSX(Yosemite)でApacheを起動してccchart、Chart.jsを使ってみる

チャートを作成するプログラムが好きだ。いや、図表にかぎらずUI系の実装はコードに対してアウトプットがわかりやすく変化していくのが書いてて楽しい。Gtkとか、System.Windows.Form とか、javax.swing とか、HTML とか、iOS, Androidアプリとか。IE6対応だけは悪夢だけど。

スポンサーリンク




OSX(Yosemite)でのApacheの準備

Webで図表作成する仕事が出来そうなので、事前にちょっとだけ勉強しておく。JavaScriptでチャートを書くことになりそうなので、環境としてOSX+Apache2を用意する。静的なページ上でJavaScriptのチャート作成するだけなので本来Apacheはいらないが、せっかく?なのでOSX上でのApache起動を確認しておく。 設定ファイル「httpd.conf」からユーザディレクトリの設定をする。以下2行のコメントアウトを外し設定を有効化する。

$ sudo vim /etc/apache2/httpd.conf
LoadModule userdir_module libexec/apache2/mod_userdir.so
・・・
# User home directories
Include /private/etc/apache2/extra/httpd-userdir.conf

コメントアウトを外した「httpd-userdir.conf」を編集する。ここでも1行コメントアウトを外す。

$ sudo vim /private/etc/apache2/extra/httpd-userdir.conf
Include /private/etc/apache2/users/*.conf

「users」ディレクトリにもともとあるGuest.confを編集する。

$ sudo vim /private/etc/apache2/users/Guest.conf
<Directory "/Users/*/Sites/">
 Options Indexes MultiViews FollowSymLinks
 Require all granted
 #Options Indexes MultiViews
 #AllowOverride None
 #Order allow,deny
 #Allow from all
</Directory>

設定が終わったら、公開用のディレクトリを作成し、Apacheを起動する。

$ mkdir ~/Sites
$ echo hello > ~/Sites/test.html
$ sudo apachectl start

「http://localhost/~<Username>/test.html」にアクセスしてみる。

20150422_chart01無事、表示された。今日はccchartChart.jsを触ってみる。

ccchartを試す

ccchartのサイトからchart.jsを取得し、単純な線グラフを書いてみる。

<script src="ccchart.js" charset='UTF-8'></script>
<canvas id="canvas01"></canvas>
<script>
var data01 = {
  config: {
    title: '線グラフ',
    subTitle: 'Click',
    type: 'line',
    useMarker: 'css-ring',
    lineWidth: 8,
    borderWidth: 7,
    useVal: 'yes',
    //markerWidth: 30
  },
  data: [
    ['X軸', 1, 2, 3],
    ['線1', 10, 3, 7]
  ]
};
ccchart.init('canvas01', data01);
</script>

「config」でチャートの設定を、「data」で表示するデータを定義するだけで簡単にチャートを描画できる。


ccchart はタイトルや凡例が簡単にチャートに埋め込めるのは使い勝手が良さそうである。

Chart.jsを試す

続いて、Chart.jsの公式サイトからChart.jsを取得しベジェ曲線を描画する。

<script src="Chart.js"></script>
<canvas id="canvas02"></canvas>

<script>
var canvas02 = document.getElementById('canvas02');
var data02 = {
  labels: ['x1', 'x2', 'x3'],
  datasets: [
    {
      fillColor: 'rgba(220,220,220,0.5)',
      strokeColor : "rgba(220,220,220,1)",
      pointColor : "rgba(220,220,220,1)",
      pointStrokeColor : "#fff",
      data: [10, 3, 7],
    }
  ]
};
var chart01 = new Chart(canvas02.getContext('2d')).Line(data02);

X軸を「labels」に定義し、実際に描画するデータ(書式と値)を「datasets」に定義する。


Chart.jsは、デザインがシンプルで美しい。一方で、凡例をつけることができない(一部可能なチャートもある)ようでこのへんはccchartに劣る。

まとめ

現段階では単純なチャートを書いただけであり、どちらが良いとは一概に言えない。互いに一長一短はありそうなのでしばらく平行して評価を進めていく。

スポンサーリンク







  • このエントリーをはてなブックマークに追加