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

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

  • このエントリーをはてなブックマークに追加

チャート作成できる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>
  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

SONICMOOVでは、Webデザイナー、コーダーの経験を経て、Webディレクターに。様々なWeb制作・アプリ開発に携わり、その後、便利な用務員に。Hep Hep!にてeizとして記事執筆中。

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation