Question

AmMaps具有很酷且易于为区域创建热图的功能： https://www.amcharts.com/demos/us-heat-map/

是否可以将它用于点（图像） - 根据值，colorSteps等计算图像颜色？

Answer 1

从技术上讲，热图功能不适用于图像。但是，使用非常基本的插件很容易应用相同的原理：

<div id="footer-left">
  <p>E-mail me at mail@alexbrunner.com
    <br />or visit my profiles at</p>
  <ul id="profiles">
    <li>
      <a href="http://www.facebook.com/alexbrunner" target="_blank">
        <img src="../images/icons/16/facebook_bw.png" class="profile" alt="Facebook" />
      </a>
    </li>
    <li>
      <a href="https://plus.google.com/u/0/109422064867262895187/about" target="_blank">
        <img src="../images/icons/16/googleplus_bw.png" class="profile" alt="Google plus" />
      </a>
    </li>
    <li>
      <a href="https://www.xing.com/profile/Alex_Brunner7" target="_blank">
        <img src="../images/icons/16/xing_bw.png" class="profile" alt="Xing" />
      </a>
    </li>
    <li>
      <a href="http://at.linkedin.com/in/abrunner/en" target="_blank">
        <img src="../images/icons/16/linkedin_bw.png" class="profile" alt="Linkedin" />
      </a>
    </li>
  </ul>
</div>

在地图代码之前的某处添加它。另外，请确保在AmCharts.addInitHandler(function(map) { // check if `colorSolid` is set for `imagesSettings` if (map.imagesSettings.colorSolid === undefined) return; // calculate minimum and maximum value var minValue, maxValue; if (map.minValue === undefined || map.maxValue === undefined) { for (var i = 0; i < map.dataProvider.images.length; i++) { var image = map.dataProvider.images[i]; if (image.value !== undefined) { if (minValue === undefined || (image.value < minValue)) minValue = image.value; if (maxValue === undefined || (image.value > maxValue)) maxValue = image.value; } } } // use map overrides if set if (map.minValue !== undefined) minValue = map.minValue; if (map.maxValue !== undefined) maxValue = map.maxValue; // set colors for each area for (var i = 0; i < map.dataProvider.images.length; i++) { var image = map.dataProvider.images[i]; if (image.color === undefined && image.value !== undefined) { // we set colors for those images that don't have color set explicitly var percent = (image.value - minValue) / (maxValue - minValue); image.color = AmCharts.getColorFade( map.imagesSettings.color, map.imagesSettings.colorSolid, percent); } } }, ["map"]);中设置了color和colorSolid。

这是一个完整的working example。

AmMaps - 图像而不是区域的热图

1 个答案: