Chart.js を画像で表示できる QuickChart
この記事は約 3 分で読めます。
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',
},
},
},
}
}">
静的画像が生成されるので
animation や Tooltip などは
表示されません。
チャート構成全体を URL-encode することをお勧めします。
エンコードされていない場合は、
#記号やその他の特殊文字で問題が発生します。
imgタグのソースは
グラフ作成用JavaScriptライブラリーが使えない環境、
例えばJavaScriptを許可していないブログでも
グラフを表示させる事ができます。
以下で
goo blog で書いた記事を
ご紹介いたします。
Chart.js と QuickChart を
比較してみました。
animation や Tooltip が
表示されなくても、
カスタマイズ如何で
同じように表示されます。
Chart.js
JavaScript charting by Chart.js
Reference statistics
QuickChart
Chart images by QuickChart
Source by GitHub
パソコンでは
ほぼ同じ感じに表示されています。
グラフ作成用JavaScriptライブラリーが
使えない環境だったり、
簡単にグラフを表示したい時に
便利に使えるのではと思います。
最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
まだ、コメントがありません