チャート作成できるJavaScriptのライブラリは色々とあるかと思いますが、手描き風のチャートが作成できるChart.xkcdについて紹介します。
Chart.xkcdとは？
https://timqian.com/chart.xkcd/ Chart.xkcdは、手描き風のチャートが作成できるJavaScriptライブラリです。数値を入力するだけで簡単にチャートが作成でき、ラインチャート、XYチャート、バーチャート、パイチャート、レーダーチャートの5つのチャートのいずれかが作成できます。 チャート上にマウスオーバーすると、数値データが表示され、コピペするだけで簡単に使えます。
ラインチャート
表示されない場合は、「Return」をクリックしてみてください。 ポピュラーなラインチャートのサンプルです。datasetsの中のlabelは、日本語で記入すると枠が広がらないので注意が必要です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
[sourcecode lang="javascript"] <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> [/sourcecode] |
XYチャート
公開されているXYチャートのサンプルです。オプションでドットを線でつなげることもできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
[sourcecode lang="javascript"] <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>[/sourcecode] |
バーチャート
バーチャートのサンプルです。これもシンプルで使いやすそうです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
[sourcecode lang="javascript"] <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> [/sourcecode] |
パイチャート
パイチャートのサンプルです。比率をみたい場合に使えそうですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
[sourcecode lang="javascript"] <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> [/sourcecode] |
レーダーチャート
レーダーチャートサンプルです。値を比較したいときに使用すると良さそうですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
[sourcecode lang="javascript"]<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>[/sourcecode] |
