计算十六进制颜色范围

Question

我正在尝试对我们的国际项目在世界上的位置实施全球热图。 我正在为此目的使用JQVmap 。

 $(document).ready(function() { var data = { "af": 16.63, "al": 11.58, "dz": 158.97, "ca": 146.9 }; var max = 0, min = Number.MAX_VALUE, cc, startColor = [200, 238, 255], endColor = [0, 100, 145], colors = {}, hex; // Find max and min values for(cc in data) { if(parseFloat(data[cc]) > max) { max = parseFloat(data[cc]); } if(parseFloat(data[cc]) < min) { min = parseFloat(data[cc]); } } // Set colors according to data values for(cc in data) { if(data[cc] > 0) { colors[cc] = '#'; for(var i = 0; i < 3; i++) { hex = Math.round( startColor[i] + (endColor[i] - startColor[i]) * (data[cc] / (max - min)) ).toString(16); if(hex.length == 1) { hex = '0' + hex; } colors[cc] += (hex.length == 1 ? '0' : '') + hex; } } } $("#vmap").vectorMap({ map: 'world_en', backgroundColor: '#f5f5f5', borderColor: '#888888', borderOpacity: 0.25, borderWidth: 1, colors: colors, enableZoom: true, hoverColor: false, hoverOpacity: 0.7, normalizeFunction: 'linear', selectedColor: false, selectedRegions: null, showTooltip: true }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/jqvmap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/jquery.vmap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/maps/jquery.vmap.world.js"></script> <div id="vmap" style="width: 100%; height: 400px;"></div> 

您会注意到，有一个充满黑色的国家，其结果是#-105988 。 我唯一的猜测是问题出在公式之内

startColor[i] + (endColor[i] - startColor[i]) * (data[cc] / (max - min))

我试图通过将第一个操作括在圆括号中来对它们进行分组，但这并不能解决我的问题。 我也尝试使用Math.abs((endColor[i] - startColor[i]))但这也没有解决。

老实说，这不是我的公式，我真的不知道如何计算不同的色调来表示值的密度，因此我不知道如何调整公式。 该公式直接取自图书馆的官方文档 。

Answer 1

显然，我不需要自己计算颜色，因为库已经可以为您做到这一点-只需提供数据即可。

 $(document).ready(function() { var data = { "af": 16.63, "al": 11.58, "dz": 158.97, "ca": 146.9 }; $("#vmap").vectorMap({ map: 'world_en', backgroundColor: '#f5f5f5', borderColor: '#888888', borderOpacity: 0.25, borderWidth: 1, // colors: colors, enableZoom: true, hoverColor: false, hoverOpacity: 0.7, normalizeFunction: 'linear', scaleColors: ['#C8EEFF', '#006491'], selectedColor: false, selectedRegions: null, showTooltip: true, values: data }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/jqvmap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/jquery.vmap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/maps/jquery.vmap.world.js"></script> <div id="vmap" style="width: 100%; height: 400px;"></div>