我正在研究一个模型,该模型将根据国家和百分比显示一个人的遗传人口构成。我已经对这些数据进行了计算。我需要一个能够解释这些数据并将其显示在页面上的解决方案。我试图达到的解决方案将执行以下操作:
根据从数据库中提取的数据创建一个国家数组,然后从现有的颜色数组中分配一种颜色,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# 中完成的,所以如果有人对这条路线有建议,那也可以。谢谢!