チャート作成できるJavaScriptのライブラリは色々とあるかと思いますが、手描き風のチャートが作成できるChart.xkcdについて紹介します。
目次
Chart.xkcdとは？
https://timqian.com/chart.xkcd/
Chart.xkcdは、手描き風のチャートが作成できるJavaScriptライブラリです。数値を入力するだけで簡単にチャートが作成でき、ラインチャート、XYチャート、バーチャート、パイチャート、レーダーチャートの5つのチャートのいずれかが作成できます。
チャート上にマウスオーバーすると、数値データが表示され、コピペするだけで簡単に使えます。
ラインチャート
表示されない場合は、「Return」をクリックしてみてください。
ポピュラーなラインチャートのサンプルです。datasetsの中のlabelは、日本語で記入すると枠が広がらないので注意が必要です。
<svg class="line-chart"></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
const svg = document.querySelector('.line-chart')
const lineChart = new chartXkcd.Line(svg, {
title: '日本の人口の推移', // optional
xLabel: '年', // optional
yLabel: '人工', // optional
data: {
labels: ['1980', '1985', '1990', '1995', '2000', '2005', '2010', '2015'], // X軸のデータ（年）
datasets: [{
label: 'Total',
data: [117060396, 121048923, 123611167, 125570246, 126925843, 127767994, 128057352, 127094745],
}, {
label: 'Men',
data: [57593769, 59497316, 60696724, 61574398, 62110764, 62348977, 62327737, 61841738],
}, {
label: 'Women',
data: [59466627, 61551607, 62914443, 63995848, 64815079, 65419017, 65729615, 65253007],
}],
},
options: { // オプション
yTickCount: 5, // Y軸の間隔
legendPosition: chartXkcd.config.positionType.upLeft // 案内窓の表示位置
}
});
</script>
XYチャート
公開されているXYチャートのサンプルです。オプションでドットを線でつなげることもできます。
<svg class="xy-chart"></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
const svg = document.querySelector('.xy-chart');
new chartXkcd.XY(svg, {
title: 'Pokemon farms', //optional
xLabel: 'Coodinate', //optional
yLabel: 'Count', //optional
data: {
datasets: [{
label: 'Pikachu',
data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 100 }, { x: 1, y: 2 }, { x: 2, y: 4 }],
}, {
label: 'Squirtle',
data: [{ x: 3, y: 122 }, { x: 4, y: 212 }, { x: -3, y: 100 }, { x: 1, y: 1 }, { x: 1.5, y: 12 }],
}],
},
options: { //optional
xTickCount: 5,
yTickCount: 5,
legendPosition: chartXkcd.config.positionType.upRight,
showLine: false,
timeFormat: undefined,
dotSize: 1,
dataColors: ['#ff0000', '#fdc400'] // 色の指定
},
});
</script>
</iframe>バーチャート
バーチャートのサンプルです。これもシンプルで使いやすそうです。
<svg class="bar-chart"></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
const svg = document.querySelector('.bar-chart')
const barChart = new chartXkcd.Bar(svg, {
title: 'SONICMOOVの男女比', // optional
// xLabel: '', // optional
// yLabel: '', // optional
data: {
labels: ['男性', '女性'],
datasets: [{
data: [64, 36],
}],
},
options: { // optional
yTickCount: 2,
dataColors: ['#0089fd', '#e4007f'] // 色の指定
},
});
</script>
パイチャート
パイチャートのサンプルです。比率をみたい場合に使えそうですね。
<svg class="pie-chart"></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
const svg = document.querySelector('.pie-chart');
const pieChart = new chartXkcd.Pie(svg, {
title: 'SONICMOOVの職種別比率', // optional
data: {
labels: ['Engineer', 'Director', 'Creative', 'Back office'],
datasets: [{
data: [45, 35, 15, 5],
}],
},
options: { // optional
innerRadius: 0.5,
legendPosition: chartXkcd.config.positionType.upRight,
},
});
</script>
レーダーチャート
レーダーチャートサンプルです。値を比較したいときに使用すると良さそうですね。
<svg class="radar-chart"></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1.3/dist/chart.xkcd.min.js"></script>
<script>
const svg = document.querySelector('.radar-chart');
const radarChart = new chartXkcd.Radar(svg, {
title: 'レーダーチャートサンプル',
data: {
labels: ['Str', 'Int', 'Agi', 'End', 'Cha'],
datasets: [{
label: 'ccharrrt',
data: [2, 1, 1, 3, 1],
}, {
label: 'chhaart',
data: [1, 2, 2, 1, 1],
}],
},
options: {
showLegend: true,
dotSize: 0.8,
showLabels: true,
legendPosition: chartXkcd.config.positionType.upRight,
// unxkcdify: true,
},
});
</script>
