2

jQueryを使用して一連のDIVを使用して積み上げ棒グラフを作成しています。各スタックのセグメントは、さまざまなグレーの色合いで色付けされています。相対的な明るさを維持しながら、divの彩度を変更して、色を灰色からある色合いに変化させることにより、追加のグローバル値を棒グラフにエンコードしたいと思います。明らかなオプションは、各要素のHSL値を個別に変更することです。

バーの色を微調整するもっと賢い方法を見落としていますか？バーが透明にならないので、コンテナの背景色は使えないと思います。

4

2 に答える 2

1

このプロジェクトはまさにあなたが求めていることを行う と思います!

jQuery を使用して色をアニメーション化するためのサポートを追加します。

このデモをチェックしてください

于 2012-05-25T20:51:02.700 に答える
0

答えをもう少し明確に文書化したいと思います。@ Pheonixblade9のアドバイスに従って、jQueryカラープラグインを使用しましたが、正しく機能させるのに問題がありました。

  1. githubから入手したjQueryカラープラグインの最新バージョンは、jQuery1.4.2では正しく機能しませんでした。1.4.4にアップグレードすると、jQuery.typeが定義されていないことに関連して発生したエラーがなくなりました。
  2. 各要素に部分的な透明度を導入するために、色付けしようとしていたdiv構造を変更する必要がありました。色付けが必要な最大4つの重複するdivがあり、最終的に機能したのは、各divの不透明度を0.3に設定して、必要な4つのレベルの読みやすいグレースケール範囲を生成することでした。最初は、不透明度1の各divにグレースケール値を割り当てていました。

  3. @ Pheonixblade9の回答へのコメントで述べたように、彩度の値が0になると、プラグインは色相の値を失い、代わりに0を使用するため、彩度を変化させる単純な解決策は機能しませんでした。これを確実に機能させるために、飽和値に最小値を導入しました。これは、モニターに表示されないほど小さいですが（予想）、プラグインコードが色相を失うのを防ぐのに十分です。

    function setSaturation($elem, score, animationDuration) {
     var targetColor = $.Color({saturation: Math.max(score, 0.01)});
     $elem.animate({backgroundColor: targetColor}, animationDuration);
 }
于 2012-05-29T22:07:57.510 に答える