PIYO - Tech & Life -

JavaScriptでかっこいいグラフを書けるHighcharts JS

あけましておめでとうございます。

12月の途中から集中的に更新してみたんですが、何でもいいから書くっていうのが少し楽しくなってきました。今年もそんな感じでいければと思います。

さて本題。

HTMLでグラフを扱うライブラリは多数ありますが、その中でもとりわけ使いやすくて見た目もきれいなのがHighcharts JSです。

Highcharts - Interactive JavaScript charts for your webpage

はてなブックマーク数が多いことから考えると日本でもかなりの認知度があるようです。

導入・使い方

普通のJavascriptなライブラリと同様、Webサイトからダウンロードしてきてscriptタグに入れるだけです。ホスティングされているファイルを使うっていうのも有りかもしれません。なお商用利用は有料のようなので注意が必要です。

使い方はかなりシンプルですが、オプションが複雑です。

<div id=“chart”></div>
$(“#chart).highcharts({
  // オプションやデータをずらずら〜っと書く
});

ミニマルな折れ線グラフ

適当にデータを渡すだけでこれだけのグラフを書いてくれます。すごいです。CorePlotをディスるわけじゃないですが比べ物にならないですねw

デモ集

ここで色々書くよりもデモを紹介したほうが早いことに気がついたので。

Highcharts - Basic line