c# - 动态渐变

Question

我正在研究一个模型，该模型将根据国家和百分比显示一个人的遗传人口构成。我已经有了这个数据的计算。我需要一个解决方案来解释这些数据并将其显示在页面上。我试图达到的解决方案将执行以下操作:

根据从数据库中提取的数据创建一个国家/地区数组，然后从现有的颜色数组中分配一种颜色，color1 = country1...等等。将颜色分配给国家后，将颜色插入具有动态百分比(与国家相关联的百分比)的动态渐变中。

我已经探索了几种没有可靠解决方案的方法。我的颜色数组包含 10 种颜色，所以我尝试了较少的路线，但是我如何将颜色分配传达给 JS 中的国家？？？ (注意:我对 less 代码做了一些更新!!)

@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# 中完成的，所以如果有人对该路线有建议，那也可以。谢谢!

Answer 1

您已经非常接近您所获得的 JS 示例 - 存在一些问题:

• 您没有使用正确的数组语法来获取各个颜色。数组是从 0 开始索引的，并且像 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%});

它的实现相当简单，但可能有点偏离这个答案。