【JavaScript】手書き風グラフ
今回は、手書き風のグラフを作成するjsライブラリ「CHART.XKCD」を紹介します。
手書きで可愛いグラフが描画できますので、ちょっとしたアクセントに良いと思います。
ライブラリの読込
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.js"></script>
HTMLの記述
SVGタグを準備
<svg class="line-chart"></svg>
JSの記述
titleでグラフのタイトル、xLabelとyLabelでそれぞれX軸・Y軸のラベル、datasetsでそれぞれのデータをセットします。
const svg = document.querySelector(".line-chart");
new chartXkcd.Line(svg, {
title: "デベロッパーの月収",
xLabel: "月",
yLabel: "$ ドル",
data: {
labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
datasets: [
{
label: "計画",
data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000]
},
{
label: "現実",
data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150]
}
]
},
options: {}
});
フォントの変更
デフォルトでは英文のフォントなので、optionでフォントを日本語の適当なフォントを当てる
options: {
fontFamily:'Yomogi',
}
手書きグラフ
