2

私は、国とパーセンテージに基づいて人の遺伝的人口構成を表示するモデルに取り組んでいます。私はすでにこのデータの計算をしています。このデータを解釈してページに表示するソリューションが必要です。私が到達しようとしているソリューションは、次のことを行います。

データベースから取得されたデータごとに国の配列を作成し、既存の色の配列から色を割り当てます。color1 = country1... などです。色が国に割り当てられたら、色を動的なパーセンテージ (国に関連付けられているパーセンテージ) で動的なグラデーションに差し込みます。

私はこれを行ういくつかの方法を検討しましたが、確実な解決策はありませんでした。私のカラー配列には10色が含まれているので、少ないルートを試しましたが、JSで国に色の割り当てを伝えるにはどうすればよいですか??? （注：少ないコードにいくつかの更新を加えました!!）

@yellow: #feea00;
@green1: #85c441;
@green2: #15ae4b;
.gradient (@color; @color2) {
background: -moz-linear-gradient(top,  @color 0%, @color2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@color), color-stop(100%, @color2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  @color 0%,@color2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  @color 0%,@color2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  @color 0%,@color2 100%); /* IE10+ */
background: linear-gradient(to bottom,  @color 0%,@color2 100%); /* W3C */
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color', endColorstr='@color2',GradientType=0 ); /* IE6-9 */
}

.cMatch img.green1 {
  .gradient (@green1; (@green1 + #222));
}
.cMatch img.green2 {
  .gradient (@green2; (@green2 + #222));
 }
.cMatch img.blue1 {
 .gradient (@blue1; (@blue1 + #222));
 }

等々

また、jsで動的スタイルを実行することも考えましたが、必要なすべてのことを実行するための正しい方法でそれにアプローチしたかどうかはわかりません.... jqueryベースで、上記の少ないコードを使用するソリューションが本当に欲しいです、しかし、私はまだ実験段階です! 以下は私の動的jsの試みでした。

var CountryColor = ['feea00', '85c441', '15ae4b', '0078ff', '36c4bf', '392a7d', 'a02896', 'c52127', 'f09c20', 'e75725'];

$(document).ready(function () {
    $('.Jewish').style.background = "webkit-gradient(linear, left top, left bottom, color-stop(0%," + CountryColor + "), color-stop(10%,#ffffff), color-stop(11%," + CountryColor + "), color-stop(22%,#ffffff), color-stop(23%," + CountryColor3 + "), color-stop(34%,#ffffff), color-stop(35%," + CountryColor4 + "), color-stop(45%,#ffffff), color-stop(46%," + CountryColor5 + "), color-stop(55%,#ffffff), color-stop(56%," + CountryColor6 + "), color-stop(66%,#ffffff), color-stop(67%," + CountryColor7 + "), color-stop(76%,#ffffff), color-stop(77%," + CountryColor8 + "), color-stop(83%,#ffffff), color-stop(84%," + CountryColor9 + "), color-stop(91%,#ffffff), color-stop(92%," + CountryColor10 + "), color-stop(100%,#ffffff));
});

グラデーションには、国の割合の内訳に応じて、1 色から最大 10 色が含まれます。

最善のルートについて誰かが提案してくれれば、大歓迎です。私のサイト全体はasp.netとC＃で行われているので、誰かがそのルートについて提案を持っていれば、それもうまくいくでしょう. ありがとう！

4

1 に答える 1

1

あなたが持っている JS の例にかなり近づいています - いくつかの問題があります:

  • 個々の色を取得するために正しい配列構文を使用していません。配列は 0-index であり、ArrayName[i] のように最も簡単にアクセスできます (つまり、CountryColor[0] から CountryColor[9]

  • jQuery コレクションは .css() メソッドhttp://api.jquery.com/css/を使用して背景を設定します (あなたが持っている「スタイル」ではなく、これは単純な JS のものです)。

  • jQuery で裸のクラス セレクターを使用することは避ける必要があります。これらは非常に遅く非効率的であるためです。ID を使用するか (各グラデーションが一意の場合)、セレクターをタグ名で修飾するか、最初に ID で要素を見つけてから検索します。あなたが望むクラスのためにその中に。両方を行うことができます - 例: $('#yourContainer div.Jewish').

この例は、ほぼ機能するはずです。

var CountryColor = ['#feea00', '#85c441', '#15ae4b', '#0078ff', '#36c4bf', '#392a7d', '#a02896', '#c52127', '#f09c20', '#e75725'];

$(document).ready(function () {
  $('.Jewish').style.background = "webkit-gradient(linear, left top, left bottom, color-stop(0%," + CountryColor[0] + "), color-stop(10%,#ffffff), color-stop(11%," + CountryColor[1] + "), color-stop(22%,#ffffff), color-stop(23%," + CountryColor[2] + "), color-stop(34%,#ffffff), color-stop(35%," + CountryColor[3] + "), color-stop(45%,#ffffff), color-stop(46%," + CountryColor[4] + "), color-stop(55%,#ffffff), color-stop(56%," + CountryColor[5] + "), color-stop(66%,#ffffff), color-stop(67%," + CountryColor[6] + "), color-stop(76%,#ffffff), color-stop(77%," + CountryColor[7] + "), color-stop(83%,#ffffff), color-stop(84%," + CountryColor[8] + "), color-stop(91%,#ffffff), color-stop(92%," + CountryColor[9] + "), color-stop(100%,#ffffff));
});

JS オブジェクトを使用して色を保存すると、コードが読みやすくなる場合があります。

CountryColors = {
  Afghanistan: '#00FFCC',
  Albania: '#00FFCC',
  Algeria: '#00FFCC',
  American Samoa: '#00FFCC',
  Andorra: '#00FFCC', 
  Angola: '#00FFCC',  
  Anguilla: '#00FFCC',  
  Antigua and Barbuda: '#00FFCC',
  Argentina: '#00FFCC', 
  Armenia: '#00FFCC',
  Aruba: '#00FFCC'         
}

次に、JS でそれらを名前で参照できます。

CountryColors.Afghanistan

最後に、これらすべてをパッケージ化する良い方法は、これらすべてを処理し、すべてのブラウザ固有のスタイルを作成し、白いスペーサーを挿入するなどの単純な jQuery プラグインを作成することです。次のように呼び出すことができます。

$('div#Bob').countryColorFill({Albania: 15%, Angola: 45%, Aruba: 40%});

その実装はかなり単純ですが、おそらくこの回答の軌道から少し外れています。

于 2013-02-12T20:18:55.533 に答える