top of page

[JavaScript]chart.jsで積み上げグラフを描画


やりたいこと

積み上げグラフはstack:オプションを同じ値に設定すれば簡単に描けるが、今回やりたいのは


  • データa、bがある

  • bはaの一部である

  • aに対するbの割合をグラフで表したい


もちろん、bとa-bを通常の積み上げグラフにしてもいいが、a-bがさほど重要でない場合、つまりaに対するbの割合にフォーカスしたい場合は、aとbとの下端を揃えた棒グラフを描画したい



やり方

beginAtZero: trueを設定すればよい

return new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ["Graph"],
        datasets: [
          {
            label: "a",
            data: [a],
            backgroundColor: 'salmon',
          },        
          {
            label: "b",
            data: [b],
            backgroundColor: 'dodgerblue',
          },  
        ]
      },
      options: {
        scales: {
          x: {
            stacked: true,
          },
          y: {
            beginAtZero: true,
          },
        },
      },
    })

下記のようなグラフが描画できる


最新記事

すべて表示

[JavaScript]chart.jsでdatalabelsが表示されない

現象 chart.jsを用いてグラフを描画している。 options: { plugins: { datalabels: { でラベルを表示したいが、なぜか表示されない 原因と解決策 以下をoptions:と同じ階層に追加 plugins: [ ChartDataLabels, ],

Comments


あなたの買い物をサポートする
アプリ Shop Plan

iphone6.5p2.png

​いつ何を買うかの計画を立てられるアプリです。

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

靴を大切にしよう!靴管理アプリ SHOES_KEEP

納品:iPhone6.5①.png

靴の履いた回数、お手入れ回数を管理するアプリです。

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

「後で読む」を忘れないアプリ ArticleReminder

気になった​Webサイトを登録し、指定時刻にリマインダを送れるアプリです

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page