私は自分のウェブサイトの評価バーを作成していますが、いくつか質問 があります。ここに codepen のリンクがあるので、これまでの評価を確認できます。
私が必要としているのは、好きなもの (緑) と嫌いなもの (赤) の 2 つの異なる色を用意することです。これら2つを分離して、バーを共有するにはどうすればよいですか。YouTubeの評価バーに少し似ています
そして2つ目の質問
私はRailsを使用しています（この質問に答えるのにRailsの専門知識は必要ありません）ので、好きなもの<%= @movies.likes.size %>（つまり：5000）と嫌いなもの<%= @movies.dislikes.size %>（つまり：3000）のコードは、幅の％にこのような高い数値を使用すると機能しません。バーに合わせて比例させるにはどうすればよいですか ありがとう
.meter-slim の背景色を嫌いな色に変更し、.meter-slim .purple の背景色を好きな色に変更します (例では緑)。
両方の場所で、そのクラスの名前を紫から別のもの (おそらく緑) に変更することもできます。
次に、パーセンテージ（例では85％）については、 100*likes/(likes+dislikes) を使用します
編集： 以下のコメントに基づいて、これに追加すると思いました。
前述したように、Ruby を試したのは 10 年前の 2 回だけなので、記憶が薄いです。
すべてをに入れるという私の考え<%= %>は、質問のスニペットに基づいていました。私がすぐに提案すべきだったより良いアプローチは、賛成票の割合の変数を作成し (それを percent_upvotes と呼びましょう) "width: <%= @percent_upvotes %>%"、ビューで使用することです。
したがって、その値を計算し、percent_upvotes に格納する必要があります。1 つの方法は、SQL ステートメントで投票に対する賛成票の割合を引き出すことです。あなたのスキーマはわかりませんが、次のようなものになります...
SELECT (upvotes/votes) AS percent_upvotes FROM your_table
またはあなたのRubyで...
percent_upvotes = (movies.upvotes.size.to_f / movies.votes.size.to_f ) * 100.0
一部の CSS フレームワークには、CSS プログレス バーがネイティブに含まれています。
いくつか例を挙げると：
およびいくつかの CSS リソース:
いいねの割合を計算するには、次のようにします。
100*likes/(likes+dislikes)
最初の質問については、たとえば .meter-slim の背景色を赤に設定できなかったのはなぜですか?