jQueryで複数の棒グラフの高さを相対的に表示したい

Question

前提・実現したいこと

現在、jqueryのclass追加とcssを使って、jsonから取得したデータをもとに棒グラフを実装しております。
複数の縦向き棒グラフのheightをクラス追加によってjsonから取得した値分動的に変更させています。

ここから困っているポイントなのですが、
下記画像のようにグラフが複数あるなかで一番右端のグラフの高さを100%とし、それと相対的に他のグラフの高さを動的に変更することは可能でしょうか。

なお、グラフは増減する場合があり、どのような場合でも右に向かって値が大きくなります。

※以下画像の値は適当に入れている状態です。

// 受け取るデータのサンプルです。
var sampleData = [1.0, 2.0, 3.0, 5.0]

Comments

[yambejp]

> 一番右端のグラフの高さを100%

右が最大ではないグラフだとオーバーフローしますが大丈夫ですか？

[aa316316]

ご質問ありがとうございます！
いただくjsonの仕様で必ず右が最大値になるようにデータをいただけるそうです。
グラフとしては左から右に上がっていくイメージです。

よろしくお願いいたします。

[yambejp]

棒グラフの幅や棒と棒の間の幅はどうするのでしょうか？

[aa316316]

棒と棒の間隔はグラフ全体を包む親要素にwidthを指定し、flexboxのjustify-content: space-betweenで均等に配置しておりました。
棒の横幅に関しては、グラフ単体を包むdiv要素にwidthを指定し、グラフ自体にはwidth: 100%と指定している状態です。

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

Answer 1

なにをどうしたいのかがよくわかりませんが、例えばこう

var a = [1.0, 2.0, 3.0, 5.0]
var b = a.map(x=>{return {value:x,ratio:x/a[a.length-1]}});
console.log(b);

Comments

[aa316316]

ありがとうございます！
上記参考に解決できました！
たすかりました！