コピペで手描き風チャートを作成できるJavaScriptライブラリChart.xkcd

マーツ

2019.09.25

チャート作成できるJavaScriptのライブラリは色々とあるかと思いますが、手描き風のチャートが作成できるChart.xkcdについて紹介します。

Chart.xkcdとは？
ラインチャート
XYチャート
バーチャート
パイチャート
レーダーチャート

Chart.xkcdとは？

https://timqian.com/chart.xkcd/ Chart.xkcdは、手描き風のチャートが作成できるJavaScriptライブラリです。数値を入力するだけで簡単にチャートが作成でき、ラインチャート、XYチャート、バーチャート、パイチャート、レーダーチャートの5つのチャートのいずれかが作成できます。チャート上にマウスオーバーすると、数値データが表示され、コピペするだけで簡単に使えます。

ラインチャート

<br /> See the Pen <a href="https://codepen.io/maz777/pen/zYOeEMW">Chart.xkcd Line chart sample</a> by maz<br /> (<a href="https://codepen.io/maz777">@maz777</a>) on <a href="https://codepen.io">CodePen</a>. 表示されない場合は、「Return」をクリックしてみてください。ポピュラーなラインチャートのサンプルです。datasetsの中のlabelは、日本語で記入すると枠が広がらないので注意が必要です。

[sourcecode lang="javascript"]
&lt;svg class="line-chart"&gt;&lt;/svg&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
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 // 案内窓の表示位置
    }
});
&lt;/script&gt;
[/sourcecode]

[sourcecode lang="javascript"]

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チャート

<br /> See the Pen <a href="https://codepen.io/timqian/pen/ExYZvZY">chart.xkcd XY</a> by timqian<br /> (<a href="https://codepen.io/timqian">@timqian</a>) on <a href="https://codepen.io">CodePen</a>. 公開されているXYチャートのサンプルです。オプションでドットを線でつなげることもできます。

[sourcecode lang="javascript"]
&lt;svg class="xy-chart"&gt;&lt;/svg&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
  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'] // 色の指定
    },
  });
&lt;/script&gt;
&lt;/iframe&gt;[/sourcecode]

[sourcecode lang="javascript"]

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]

バーチャート

<br /> See the Pen <a href="https://codepen.io/maz777/pen/qBWgpEb">Chart.xkcd Barchart sample</a> by maz<br /> (<a href="https://codepen.io/maz777">@maz777</a>) on <a href="https://codepen.io">CodePen</a>. バーチャートのサンプルです。これもシンプルで使いやすそうです。

[sourcecode lang="javascript"]
&lt;svg class="bar-chart"&gt;&lt;/svg&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
  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'] // 色の指定
  },
});
&lt;/script&gt;
[/sourcecode]

[sourcecode lang="javascript"]

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]

パイチャート

<br /> See the Pen <a href="https://codepen.io/maz777/pen/xxKMpPE">Chart.xkcd Pie Chart sample</a> by maz<br /> (<a href="https://codepen.io/maz777">@maz777</a>) on <a href="https://codepen.io">CodePen</a>. パイチャートのサンプルです。比率をみたい場合に使えそうですね。

[sourcecode lang="javascript"]
&lt;svg class="pie-chart"&gt;&lt;/svg&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
  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,
    },
  });
&lt;/script&gt;
[/sourcecode]

[sourcecode lang="javascript"]

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]

レーダーチャート

<br /> See the Pen <a href="https://codepen.io/maz777/pen/dybadoe">Chart.xkcd Radar Chart sample</a> by maz<br /> (<a href="https://codepen.io/maz777">@maz777</a>) on <a href="https://codepen.io">CodePen</a>. レーダーチャートサンプルです。値を比較したいときに使用すると良さそうですね。

[sourcecode lang="javascript"]&lt;svg class="radar-chart"&gt;&lt;/svg&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1.3/dist/chart.xkcd.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
  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,
    },
  });
&lt;/script&gt;[/sourcecode]