AMCharts Maps v4-在heatLegend中是否可以使用两种以上的颜色？

时间：2018-12-19 23:20:51

标签： amcharts ammap

认为可以为热图设置颜色范围而不是两个（最小和最大）会很好。就像我们对渐变列表所做的一样。

类似... 

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

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

2 个答案:

答案 0 :(得分：2)

像这样的东西不存在。

不幸的是，没有简单的方法来仅使用heatRules和HeatLegend并让它们使用其他颜色。但是，模拟heatRules并不太复杂，如果您在HeatLegend中仅使用1个marker（即一个长条，而不是多个条），则可以使用自定义一个。

我从您提供的图像中抓取了2种颜色，然后将这些颜色和黑色扔进了一个阵列：

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

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

对于emulate heatRules，我们将为mapPolygons'fill提供an adapter。在这里，我们将mapPolygon的{​​{1}}与值的最小值/最大值进行比较，后者可以通过序列“ value和dataItem.values["value"].low找到。这将为我们提供一个小数百分比，以从多种颜色中获取一种颜色。从范围中选择颜色的实用程序功能为.high，其前两个参数为iRGBs（带有am4core.colors.interpolate，r，g和b属性/值），第三个是小数百分比。如果百分比在上半部分之内，我们将让适配器返回上面a中前两个之间的颜色，如果在后半部分，则从后两个中返回颜色。

以下是该代码的样子：

heatColors

如果您有一个1标记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; }); ，即只有一个渐变的横条，那么您也可以创建自己的渐变并将其分配到适配器中：

heatLegend

如果您在var gradient = new am4core.LinearGradient(); heatColors.forEach(function(color) { gradient.addColor(color); }); heatLegend.markers.template.adapter.add("fill", function() { return gradient; }); 中有多个标记（根据图片中的最热图例），则自定义着色将更像我们对heatLegend所做的着色，除了使用适配器以外，因为我们需要知道它们的位置，并且没有heatRules或dataItem可用，所以我们将在index准备就绪后对其进行迭代，然后在其中覆盖其颜色：

markers

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

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

答案 1 :(得分：0)

我简化了演示并使之响应：https://codepen.io/team/amcharts/pen/eYJZVEV 

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create map instance
var chart = am4core.create("chartdiv", am4maps.MapChart);

// Set map definition
chart.geodata = am4geodata_usaAlbersLow;

// Set projection
chart.projection = new am4maps.projections.Miller();

// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

// Make map load polygon data (state shapes and names) from GeoJSON
polygonSeries.useGeodata = true;

// //Set min/max fill color for each area
// polygonSeries.heatRules.push({
//   property: "fill",
//   target: polygonSeries.mapPolygons.template,
//   min: chart.colors.getIndex(1).brighten(1),
//   max: chart.colors.getIndex(1).brighten(-0.3)
// });

// make room for heatLegends
chart.chartContainer.paddingBottom = 50;

// Base colors for custom "heatRules" gradient
var heatColors = [
  am4core.color("rgb(248, 227, 211)"),
  am4core.color("rgb(237, 137, 166)"),
  am4core.color("rgb(0,0,0)")
];

// Let hover state colors be relative to the "heatRule" color
var hoverState = polygonSeries.mapPolygons.template.states.create("hover");
hoverState.adapter.add("fill", function(fill) {
  return fill.lighten(-0.1);
});

// Emulate heatRule but with 2 color ranges instead of 1
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);
  // This may run before workingValue is even a thing. Let's only do our thing
  // if workingValue and ergo percent are a thing.
  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;
});

// Set up heat legends
var heatLegendTop = chart.createChild(am4maps.HeatLegend);
heatLegendTop.series = polygonSeries;
heatLegendTop.align = "center";
heatLegendTop.width = am4core.percent(38);
heatLegendTop.minValue = 0;
heatLegendTop.maxValue = 40000000;
heatLegendTop.minColor = heatColors[0];
heatLegendTop.maxColor = heatColors[2];
heatLegendTop.marginBottom = 10;
heatLegendTop.markerCount = 10;
heatLegendTop.markerContainer.minHeight = 10;
heatLegendTop.markers.template.minHeight = 10;
var markerWidth = 20;
heatLegendTop.events.on("inited", function() {
  heatLegendTop.markers.each(function(marker, markerIndex) {
    // Override default heatLegend functionality
    marker.width = markerWidth;

    // Distribute the space, this needs to be repeated e.g. on window resize,
    // orientation change, etc.
    if (markerIndex < heatLegendTop.markers.length - 1) {
      marker.marginRight =
        (heatLegendTop.markerContainer.pixelWidth -
          heatLegendTop.markerCount * markerWidth) /
        (heatLegendTop.markerCount - 1);
    }

    // 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
        )
      );
    }
  });
});

// Blank out internal heat legend value axis labels
heatLegendTop.valueAxis.renderer.labels.template.disabled = true;

var heatLegend = chart.createChild(am4maps.HeatLegend);
heatLegend.series = polygonSeries;
heatLegend.align = "center";
heatLegend.width = am4core.percent(38);
heatLegend.minValue = 0;
heatLegend.maxValue = 40000000;
heatLegend.markerContainer.minHeight = 10;
heatLegend.markers.template.minHeight = 10;

// Set up custom heat map legend labels using axis ranges
var minRange = heatLegend.valueAxis.axisRanges.create();
minRange.value = heatLegend.minValue;
minRange.label.inside = true;
minRange.label.horizontalCenter = "right";
minRange.label.dy = 5;
minRange.label.dx = -3;
minRange.label.text = "Less";
var maxRange = heatLegend.valueAxis.axisRanges.create();
maxRange.value = heatLegend.maxValue;
maxRange.label.inside = true;
maxRange.label.horizontalCenter = "left";
maxRange.label.dy = 5;
maxRange.label.dx = 3;
maxRange.label.text = "More";

// Blank out internal heat legend value axis labels
heatLegend.valueAxis.renderer.labels.template.adapter.add("text", function(
  labelText
) {
  return "";
});

// Allow the heatLegend to function in general
heatLegend.minColor = heatColors[0];
heatLegend.maxColor = heatColors[2];

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

// Configure series tooltip
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}: {value}";

// // Create hover state and set alternative fill color
// var hs = polygonTemplate.states.create("hover");
// hs.properties.fill = am4core.color("#3c5bdc");

// Set heatmap values for each state
polygonSeries.data = [
  {
    id: "US-AL",
    value: 4447100
  },
  {
    id: "US-AK",
    value: 626932
  },
  {
    id: "US-AZ",
    value: 5130632
  },
  {
    id: "US-AR",
    value: 2673400
  },
  {
    id: "US-CA",
    value: 33871648
  },
  {
    id: "US-CO",
    value: 4301261
  },
  {
    id: "US-CT",
    value: 3405565
  },
  {
    id: "US-DE",
    value: 783600
  },
  {
    id: "US-FL",
    value: 15982378
  },
  {
    id: "US-GA",
    value: 8186453
  },
  {
    id: "US-HI",
    value: 1211537
  },
  {
    id: "US-ID",
    value: 1293953
  },
  {
    id: "US-IL",
    value: 12419293
  },
  {
    id: "US-IN",
    value: 6080485
  },
  {
    id: "US-IA",
    value: 2926324
  },
  {
    id: "US-KS",
    value: 2688418
  },
  {
    id: "US-KY",
    value: 4041769
  },
  {
    id: "US-LA",
    value: 4468976
  },
  {
    id: "US-ME",
    value: 1274923
  },
  {
    id: "US-MD",
    value: 5296486
  },
  {
    id: "US-MA",
    value: 6349097
  },
  {
    id: "US-MI",
    value: 9938444
  },
  {
    id: "US-MN",
    value: 4919479
  },
  {
    id: "US-MS",
    value: 2844658
  },
  {
    id: "US-MO",
    value: 5595211
  },
  {
    id: "US-MT",
    value: 902195
  },
  {
    id: "US-NE",
    value: 1711263
  },
  {
    id: "US-NV",
    value: 1998257
  },
  {
    id: "US-NH",
    value: 1235786
  },
  {
    id: "US-NJ",
    value: 8414350
  },
  {
    id: "US-NM",
    value: 1819046
  },
  {
    id: "US-NY",
    value: 18976457
  },
  {
    id: "US-NC",
    value: 8049313
  },
  {
    id: "US-ND",
    value: 642200
  },
  {
    id: "US-OH",
    value: 11353140
  },
  {
    id: "US-OK",
    value: 3450654
  },
  {
    id: "US-OR",
    value: 3421399
  },
  {
    id: "US-PA",
    value: 12281054
  },
  {
    id: "US-RI",
    value: 1048319
  },
  {
    id: "US-SC",
    value: 4012012
  },
  {
    id: "US-SD",
    value: 754844
  },
  {
    id: "US-TN",
    value: 5689283
  },
  {
    id: "US-TX",
    value: 20851820
  },
  {
    id: "US-UT",
    value: 2233169
  },
  {
    id: "US-VT",
    value: 608827
  },
  {
    id: "US-VA",
    value: 7078515
  },
  {
    id: "US-WA",
    value: 5894121
  },
  {
    id: "US-WV",
    value: 1808344
  },
  {
    id: "US-WI",
    value: 5363675
  },
  {
    id: "US-WY",
    value: 493782
  }
];
相关问题
最新问题