Chart.js

参考:

Chart.js – Open source HTML5 Charts for your website [Official]

chartjs/Chart.js: Simple HTML5 Charts using the <canvas> tag – GitHub

ドキュメント

参考:

Chart.js documentation [Official]

Chart.js API | Chart.js documentation [Official]

Chart.js 日本語ドキュメント (misc.0o0o.org)

Chart.js/docs at master · chartjs/Chart.js – GitHub

使い方

参考:

Chart.js でグラフを描画してみた – Qiita

Chart.js で作成する折れ線グラフの実例 | Kapibara Tech Blog

点線の表示させる方法 | Pizzamanz.net

How to use Chart.js | JavaScript in Plain English

An Introduction to Chart.js 2.0 Six Simple Examples | SitePoint

導入

参考:

Chart.js でグラフを描画してみた – Qiita

ちゃーっとチャートが描ける、Chart.js の使い方 | ジーニアスブログ

Chart.js でグラフ描画にトライした話 | TechRacho

概要

参考:

グラフ作成にオススメ!「Chart.js」がかんたんに使えてイイ感じ | vdeep

棒グラフ

棒グラフを描く。

const barChart = new Chart('canvas', {
  type: 'bar',
  data, options
})

横向きの棒グラフを描く。

const barChart = new Chart('canvas', {
  type: 'horizontalBar',
  data, options
})

グラフ棒の幅を変えには barPercentage に棒の幅が占める割合を指定する。

xAxes: [{
  barPercentage: 0.85
}]

棒グラフのカテゴリーを表す軸ではデフォルトで offsetGridLines: true となり、グラフ棒に重ならないようにグリッドがずれて描画される。

参考:

棒グラフ オプション色々 – Qiita

Bar | Chart.js documentation [Official]

Horizontal Bar Chart | Chart.js documentation [Official]

Scale Configuration | Chart.js documentation [Official]

offsetGridLines | Chart.js documentation [Official]

getPixelForGridLine – Chart.js/core.scale.js at v2.8.0 · chartjs/Chart.js – GitHub

積み上げ棒グラフ

X 軸、Y 軸に stacked: true を設定する。

xAxes: [{
  stacked: true
}],
yAxes: [{
  stacked: true
}]

参考:

chart.js で積み上げ横棒グラフを描く – Qiita

入館者数の統計等に使える Chart.js の積み上げ棒グラフ | やわらか図書館学

Stacked Bar Chart | Chart.js documentation [Official]

複合グラフ

参考:

chart.js で複数軸の複合グラフを描く – Qiita

 

グリッド/目盛りの設定

参考:

Grid Line Configuration | Chart.js documentation [Official]

Tick Configuration | Chart.js documentation [Official]

凡例

凡例を非表示にする。

options: {
  legend: { display: false }
}

参考:

Legend | Chart.js documentation [Official]

ツールチップ

参考:

Tooltip | Chart.js documentation [Official]

Chart.js/core.tooltip.js at v2.8.0 · chartjs/Chart.js – GitHub

描画サイズをレスポンシブにする

canvas を含むコンテナ要素に position: relative を設定して相対配置にする。

<div style="position: relative;">
  <canvas id="chart"></canvas>
</div>

オプションで responsive: true を設定する。(デフォルト)

縦方向にもレスポンシブにするには maintainAspectRatio: false を設定する。

options: {
  responsive: true,
  maintainAspectRatio: false
}

参考:

Responsive | Chart.js documentation [Official]

フォントサイズを変更する

参考:

How to change ChartJS font size with javascript? – Stack Overflow

サンプル

参考:

Chart.js samples [Official]

Line Chart | CodePen

Bar Chart | CodePen

Radar Chart | CodePen

Polar Chart | CodePen

Pie Chart | CodePen

Doughnut Chart | CodePen

Bar Chart with Custom onClick | CodePen

プラグイン

参考:

chartjs/awesome: A curated list of awesome Chart.js resources and libraries – GitHub

Vue で使う (vue-chartjs)

参考:

apertureless/vue-chartjs: Vue.js wrapper for Chart.js – GitHub

Ruby on Rails で使う (chartjs-ror)

参考:

airblade/chartjs-ror: Simplifies using Chart.js in Rails – GitHub

Documentation for chartjs-ror | RubyDoc.info

chartjs-ror/chart_helpers.rb at v3.6.4 · airblade/chartjs-ror – GitHub

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です