AMCharts Maps v4 - 有没有办法在 heatLegend 中拥有两种以上的颜色？

Question

认为能够为热图设置一系列颜色而不是两个(最小和最大)会很好。就像我们为渐变列表所做的那样。

就像是...

function am4themes_myHeatmap(target) {
  if (target instanceof am4core.ColorSet) {
    target.list = [
      am4core.color("#F7E3D4"),
      am4core.color("#FFC480"),
      am4core.color("#DC60BF"),
      am4core.color("#A43B7D"),
      am4core.color("#5B0A25")
    ];
  }
}

See example from mockup

如果这样的东西已经存在，我很乐意看到它。

Answer 1

像这样的东西不存在。

不幸的是，没有一种简单的方法可以使用 heatRules 和 HeatLegend 并让他们使用其他颜色。但模拟起来并不过分复杂 heatRules如果您只使用 1 marker 在您的 HeatLegend (即一个长条而不是多个条)，用自定义的渐变覆盖其渐变。

我从您提供的图像中抓取了 2 种颜色，并将它们和黑色放入一个数组中:

var heatColors = [
  am4core.color("rgb(248, 227, 211)"),
  am4core.color("rgb(237, 137, 166)"),
  am4core.color("rgb(0,0,0)")
];

这不是必需的，但可能很有用。这些是三色渐变的颜色。我选择使用 3 种颜色，以便我们可以在渐变的左/右半部分之间平均分配计算，它应该简化下面的演示。您分享的图片的左半部分可能需要额外的颜色，您必须相应地调整计算，但这同样可行。

致 emulate heatRules ，我们将提供 an adapter为 mapPolygons ' fill .在那里，我们将比较 mapPolygon的 value针对这些值的最小值/最大值，后者可以通过系列' dataItem.values["value"].low 找到。和 .high .这将为我们提供一个小数百分比，以从一系列颜色中获取颜色。从范围中选择颜色的实用函数是 am4core.colors.interpolate ，它的前两个参数是 iRGB s (具有 r 、 g 、 b 和 a 属性/值的普通对象)，第三个是小数百分比。如果百分比在前半部分，我们将让适配器返回 heatColors 中前两个之间的颜色。上面，如果是在后半部分，我们将返回后两者的颜色。

下面是代码的样子:

polygonSeries.mapPolygons.template.adapter.add("fill", function(
  fill,
  mapPolygon
) {
  var workingValue = mapPolygon.dataItem.values["value"].workingValue;
  var minValue = polygonSeries.dataItem.values["value"].low;
  var maxValue = polygonSeries.dataItem.values["value"].high;
  var percent = (workingValue - minValue) / (maxValue - minValue);
  if (am4core.type.isNumber(percent)) {
    if (percent > 0.5) {
      return new am4core.Color(
        am4core.colors.interpolate(
          heatColors[1].rgb,
          heatColors[2].rgb,
          (percent - 0.5) * 2
        )
      );
    } else {
      return new am4core.Color(
        am4core.colors.interpolate(
          heatColors[0].rgb,
          heatColors[1].rgb,
          percent * 2
        )
      );
    }
  }
  return fill;
});

如果您有 1 个标记 heatLegend ，即只是一个带有渐变的条形，您也可以制作自己的渐变并将其分配到适配器中:

var gradient = new am4core.LinearGradient();
heatColors.forEach(function(color) {
  gradient.addColor(color);
});
heatLegend.markers.template.adapter.add("fill", function() {
  return gradient;
});

如果您在 heatLegend 中有多个标记(根据您图片中 HitTest 的图例)，自定义着色更像是我们为 heatRules 所做的，除了不是适配器，因为我们需要知道它们的位置并且没有 dataItem或 index可用，我们将遍历 markers一旦他们准备好了，然后在那里覆盖他们的颜色:

var heatLegendTop = chart.createChild(am4maps.HeatLegend);
heatLegendTop.series = polygonSeries;
heatLegendTop.minColor = heatColors[0];
heatLegendTop.maxColor = heatColors[2];
heatLegendTop.marginBottom = 10;
heatLegendTop.markerCount = 10;
heatLegendTop.events.on("inited", function() {
  heatLegendTop.markers.each(function(marker, markerIndex) {

    // Gradient colors!
    if (markerIndex < heatLegendTop.markerCount / 2) {
      marker.fill = new am4core.Color(
        am4core.colors.interpolate(
          heatColors[0].rgb,
          heatColors[1].rgb,
          (markerIndex / heatLegendTop.markerCount) * 2
        )
      );
    } else {
      marker.fill = new am4core.Color(
        am4core.colors.interpolate(
          heatColors[1].rgb,
          heatColors[2].rgb,
          ((markerIndex - heatLegendTop.markerCount / 2) /
            heatLegendTop.markerCount) *
            2
        )
      );
    }
  });
});

我 fork 了我们的 US heat (choropleth) map demo使用上面的代码，然后一些更接近您共享的图像的外观/感觉:

https://codepen.io/team/amcharts/pen/7fd84c880922a6fc50f80330d778654a