Chart.js を画像で表示できる QuickChart

2019年11月28日

QuickChart でグラフ画像を作成してみました。

グラフ画像は
Chart.js objects によって定義されます。

Chart.js configを使用して構成を作成したら、
イメージとしてレンダリングします。

QuickChartは出力が画像であるため、
imgタグのソースとして直接指定できます。

以下は鶏頭図のサンプルです。
その他のグラフは
Chart Types を参照の事。

<img src="https://quickchart.io/chart?width=500&height=400&devicePixelRatio=1.0&c={
  type: 'polarArea',
  data: {
    labels: ['赤', '緑', '黄', '灰色', '青'],
    datasets: [{
    label: '1つ目のデータセット',
    data: [11, 16, 7, 3, 14],
    backgroundColor: ['rgb(255, 99, 132)', 'rgb(75, 192, 192)', 'rgb(255, 205, 86)', 'rgb(201, 203, 207)', 'rgb(54, 162, 235)']
    }]
  },
  options: {
    title: {
      display: true,
      text: '鶏頭図 (polar area chart)',
      fontColor: 'hotpink',
      fontSize: 18,
    },
    legend: {
      position: 'bottom',
    },
   plugins: {
      datalabels: {
        display: true,
        font: {
          style: 'bold',
        },
      },
    },
  }
}">

チャート構成全体を URL-encode することをお勧めします。
エンコードされていない場合は、
＃記号やその他の特殊文字で問題が発生します。

imgタグのソースは
グラフ作成用JavaScriptライブラリーが使えない環境、
例えばJavaScriptを許可していないブログでも
グラフを表示させる事ができます。

以下で
goo blog で書いた記事を
ご紹介いたします。

goo blog でグラフを表示させる - gooブログはじめました！

QuickChartを使ってグラフを表示しています。QuickChartは出力が画像です。画像であるため、imgタグの ...

 https://blog.goo.ne.jp/four4to6/e/8dd546d491edb069f567908f6d...

Chart.js と QuickChart を
比較してみました。
animation や Tooltip が
表示されなくても、
カスタマイズ如何で
同じように表示されます。

Chart.js

JavaScript charting by Chart.js
Reference statistics

QuickChart

Chart images by QuickChart
Source by GitHub

パソコンでは
ほぼ同じ感じに表示されています。

グラフ作成用JavaScriptライブラリーが
使えない環境だったり、
簡単にグラフを表示したい時に
便利に使えるのではと思います。

Open Source Chart Image API | QuickChart

Create a chart image with one URL and embed anywhere. Open source, no watermarks.

 https://quickchart.io/