まず Chart.js、Rough.js、chartjs-plugin-rough.js をページに含める必要があります。
<script type="text/javascript" src="Chart.js"></script>
<script type="text/javascript" src="rough.js"></script>
<script type="text/javascript" src="chartjs-plugin-rough.js"></script>
ページに Canvas を設置します。
<canvas id="myChart"></canvas>
これでチャートを作成することができます。スクリプトをページに追加します。
ChartRough を plugins オプションとして指定することを忘れずに。
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
data: [45, 20, 64, 32, 76, 51],
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
borderWidth: 3
}]
},
plugins: [ChartRough]
});
どれだけラフに描画するか、スケッチの線をどれくらい
曲げるかをオプションで調整することができます。
...
data: {
...
datasets: [{
...
rough: {
roughness: 2,
bowing: 2
}
}]
},
...
さらに、塗りつぶしパターン、線の太さと角度、
平均的な間隔をオプションで指定することもできます。
詳細は Rough.js のドキュメントをご覧ください。
data: {
...
datasets: [{
...
rough: {
...
fillStyle: 'cross-hatch',
fillWeight: 0.25,
hachureAngle: 15,
hachureGap: 12
}
}]
},
...
スケッチ風チャートには手書き風フォントが似合います。
ダーツフォントのような Web フォントを使うと簡単です。
<link rel="stylesheet" href="https://nagix.github.io/css/dartsfont.css">
Chart.defaults.global.defaultFontFamily = 'dartsfont, cursive';
Chart.defaults.global.defaultFontSize = 14;
var chart = new Chart(ctx, {
...
GitHub リポジトリとサンプルもご覧ください。