LoginSignup
29

More than 5 years have passed since last update.

Chart.jsで帯グラフ(100%積み上げ棒グラフ)を描画する

Posted at

JavaScriptのグラフ描画ライブラリであるChart.js(v2.5.0)では、帯グラフ(100%積み上げ棒グラフ)を描画することはできません。純粋な積み上げ棒グラフはオプションで指定できますが、比率をグラフ化したかったのです。
幸いなことにChart.jsは簡単にpluginが書けるので、作ってみました。以下のようになります。

image

セットアップ

ここに書いているので、最初にプラグインをChart.jsに登録してください。

使い方

chart optionsに { stacked: '100%' } を渡すだけです。

new Chart(document.getElementById('stage'), {
  type: 'horizontalBar',
  data: {
    labels: ["Foo", "Bar"],
    datasets: [
      { label: "bad",    data: [5, 25],  backgroundColor: "rgba(244, 143, 177, 0.6)" },
      { label: "better", data: [15, 10], backgroundColor: "rgba(255, 235, 59, 0.6)" },
      { label: "good",   data: [10, 8],  backgroundColor: "rgba(100, 181, 246, 0.6)" }
    ]
  },
  options: { stacked: "100%" }
});

注意点など

  • パーセンテージは小数2位を四捨五入して小数1位までとしています。そのため、全て足しても100%にならないことがあります。ただしx軸はmax100としているので、そのへんは大丈夫です。(多少はみ出るかもですが、誤差レベルかなと)
  • 以下のオプションはプラグイン内で上書きしています。
    • options.scales.xAxes[].stacked, options.scales.yAxes[].stacked
    • options.scales.xAxes[].ticks.min, options.scales.xAxes[].ticks.max
    • options.tooltips.callbacks.label
  • ツールチップにはパーセンテージとカッコ内に元の数値を表示しています。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29