Chart.js
Last-modified: 2019-01-12 (土) 19:37:28 (3d)

Tag: IT Javascript

概要

グラフを簡単に表示できる Javascriptライブラリです。

menu

チャート

名称説明
doughnutドーナツ型の円グラフ

doughnut

グラフ

コード

<canvas id="dou-chart" width="770" height="385"></canvas>
<script>
var ctx = document.getElementById('dou-chart').getContext('2d');
var chart = new Chart(ctx, {
	// 作成したいチャートタイプ
	type: 'doughnut',

	// データセットの情報
	data: {
		labels: ["男性", "女性"],
		datasets: [{
			data: [3, 7],
			backgroundColor: [ "rgb(75, 192, 192)","rgb(255, 99, 132)"],
			fill: false
		}]
	},
	options: {
		title: {
			display: true,
			text: "性別"
		}
	}
});
</script>

設定

options

よく使いそうな options で使用できるオプションのリストです。

カッコはデフォルトの設定です。

optionstype意味用途/備考
legend凡例
displayboolean
(true)
表示設定
title--タイトル🔗 Document
displayboolean
(false)
texttextテキスト
scales
xAxesx軸(横軸)
yAxesy軸(縦軸)

TIPS

凡例を削除

options で legend の display を false にする。

 type: "bar",
 data: data,
 options: {
     legend: {
         display: false
     }
 }