5ヶ月前に投稿

Chart Library CanvasJS と Highcharts を使った感想

2020年1月23日

この記事は約 8 分で読めます。

4.5

Web pageでグラフを描写するための
JavaScriptライブラリでおすすめな
CanvasJSHighcharts の二つ。

双方とも商用利用の場合
ライセンスが必要
なので、
使い分け※ は厳しいと思いますが、
わたし自身の使ってみた感想です。

※ 非営利使用の場合は無料なので
わたしは使い分けています。

Highcharts

DataTables.js and Highcharts.js

Highcharts は DataTables を利用した
データの視覚化を学んだので
さらに便利に使えると思います。

Data Visualization With DataTables.js and Highcharts.js
公式にcredits labelをカスタム出来る。

Highchart デフォルトでは、
チャートの右下隅に
credits labelが表示されますが、
公式に非表示に出来ます。

Highcharts.chart('container', {
    credits: {
        enabled: false
    }
});

その他、
credits label の
URL、text、style、
credits label の位置構成など
オプションを使用して変更できます。

credits label in the lower right corner of the chart.
href: string
  • Defaults to "https://www.highcharts.com?credits"
text: string
  • Defaults to "Highcharts.com"
credits.style
  • color: string
    Defaults to "#999999"
  • cursor: string
    Defaults to "pointer"
  • fontSize: string
    Defaults to "9px"
credits.position
  • align: string
    Defaults to "right"
  • verticalAlign: string
    Defaults to "bottom"
  • x: number
    Defaults to -10
  • y: number
    Defaults to -5
Highcharts.chart('container', {
  credits: {
    text: "Data from blood test report",
    href: "null",
    style: {
      color: "#999999",
      cursor: "auto",
      fontSize: "9px"
    },
    position: {
      align: "right",
      verticalAlign: "bottom",
      x: -10,
      y: -5,
    }
  }
});

credit link は削除してはいけないとか、
有料ライセンスを取得しないと
非表示にできないと言った
ライブラリが多いですが、
デフォルトで変更出来るのは
ポイントが高いと思います。

上記は、
ライセンスの Attribution とは
別?と思いますので、
Credits disabled、
変更は自己責任でお願いします。

CanvasJS

Chart elements in CanvasJS

CanvasJS は
痒い所に手が届くと言うか、
わたしが(グラフを表示するのに)
必要とする機能が簡単に
設定できる点が良かったです。

愛猫ルナの血液再検査報告 2020/01/10
  1. scaleBreaks
    不要な領域を削除するために
    サイズが縮小された軸スケールの範囲です。
    不要な領域を削除し、
    小さな変動をより明確にすることができます。
  2. stripLines
    プロットエリアの特定の領域を
    強調表示/マークするために使用される垂直線または水平線です。
  3. crosshair
    現在のマウス座標または最も近いデータポイントの
    xおよびy軸の値を示すラベル付きの
    インタラクティブな垂直線または水平線です。

特に、scaleBreaks を
簡単に設定できる点

非常に評価が高いと思います。

Chart theme

チャートのテーマを設定できます。

  • Default: "light1"
  • Options: "light1″,"light2", "dark1", "dark2"
var  chart =  new  CanvasJS.Chart("container",
{
 .
 theme: "light2", //"light1", "dark1", "dark2"
 .
 . 
});
chart.render();
Theme Dark 2

サイトの背景色やテーマに
柔軟に対応出来る点
評価出来ると思います。

非営利でも気になる License

Chart License

Non-commercial でも
やはり気になるのは
ライセンス。

特に CanvasJS は
trial version から始めます。

You can evaluate using fully-featured trial version for up to 30 days.
フル機能の試用版を使用して最大30日間評価できます。

CanvasJS Chart License

30日過ぎたらどうなるのよ!
・・・って事になりますよね。

その件について検索しましたが、
具体的※ にどうなるって記事は
ヒットしませんでした。

※ 例えば、
30日過ぎたら使えなくなるとか、
機能が制限されるとか、
Licenses 取得を促す表示が出るなど。

モヤモヤしてても仕方ない。

だったら、
Non-Commercial License を
取得してしまいましょう。

非営利でもsign-upページは
ちゃんと用意されています。

上記リンクにて
必要事項を記入すると、
メールが届きます。

Highcharts
Your Highcharts Non-Commercial License Agreement

このソフトウェアは
Creative Commons Attribution-NonCommercial 3.0でリリースされており、
highcharts.com/download から

ダウンロードできます。
それ以上のアクティベーションまたは
ライセンスキーは必要ありません。

CanvasJS
You have been granted FREE CanvasJS License for Non-Commercial Use

このライセンスは、
非営利目的でのみCanvasJSを使用する場合に有効です。
クレジットリンクを損なわない限り、
CanvasJSの非商用バージョンを無料で使用できます。
今後、プロジェクトを商用化する場合は、
商用ライセンスを購入する必要があることに注意してください。

ここをクリックして、
CanvasJSのnon-commercial versionを
ダウンロードしてください。

Highcharts の
highcharts.com/download は
普通に公式サイトの
ダウンロードページで、
非営利なら、
CC license に従って使って
下さい・・・みたいな感じです。

CanvasJS の方は、
non-commercial version の
ダウンロードページは
公式サイトにはありません。

License Statementの
メールにのみ記載されている
ダウンロードページになります。

実際に、
Trial Version と
Non-Commercial Version の
違いは「透かし文字 (watermark)」で、
機能的な違い※ はないようですが、

Non-Commercial Version は
Trial(試用版)ではないので、
30日間の評価後に何か起こると
言うような事はないと思います。

※ 商用バージョンは
更に機能の追加があるのか、
その辺は未確認となりますが、
透かし文字 (watermark) は
たぶん消せる?

before and after
Before: Trial Version
Trial Version (watermark)
After: Non-Commercial Version
Non-Commercial Version (watermark)

いずれにせよ、
これを使うと決めたら
非営利でもライセンスの取得を
した方がメンタルヘルス的にも
よろしいのではないでしょうか?

Browser compatibility

CanvasJS

CanvasJSはCanvas要素を使用してチャートをレンダリングします。
Canvas要素はHTML5標準の一部であり、
図形やビットマップ画像の動的でスクリプト可能なレンダリングを可能にします。
最新のすべてのブラウザーでサポートされています。

CanvasJSは、 version 1.3 以降、
excanvas を fallback として使用する
IE6、IE7、IE8などの古いブラウザーもサポートします。

Chrome Firefox IE,Edge Safari Opera
4+ 3.6+ IE 9+ Edge 12+ 4+ 10+
Highcharts

最新バージョンを使用して、
多くのブラウザでソフトウェアをテストします。
Internet Explorerユーザーはアップグレードしない
傾向があることがわかっているため、
older versions browserも体系的にテストします。

Highchartsは、次のbrowser versionで実行されます。

Chrome Firefox IE,Edge Safari Opera
1+ 2+ IE 9+※ Edge 12+ 4+ 9+

さぁ、あなたは
どちらのライブラリを選びますか?

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
Chart Library CanvasJS と Highcharts を使った感想