如何在 am-chart（地图图表）中添加自定义 html 标签

Question

我正在尝试在美国的每个州添加自定义 html <a href="state/alaseka"><a>，如地图示例所示，输出类似于此站点“https://covidactnow.org/ ?s=1311324”，我正在按照以下方式尝试此操作

Javascript

  am4core.ready(function() {
  function am4themes_myTheme(target) {
     if (target instanceof am4core.ColorSet) {
     target.list = [
     am4core.color("#ff3b37")
      ];
     }
   }
  // Themes begin
  am4core.useTheme(am4themes_myTheme);
  // Themes end

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

  // Set map definition
  chart.geodata = am4geodata_usaLow;

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


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


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

  // Make map load polygon data (state shapes and names) from GeoJSON
   polygonSeries.useGeodata = true;
   stateName = {{ allStateName | safe }}
   statePopulation = {{ allStatePopulation | safe }}
   console.log("==========================act casess keyindicator3 =====================")
   console.log(actcase)

   var data = [];
   var id = "";
   var value = "";
   var expenses = "";

   for(var i = 0; i < stateName.length; i++){
   year =actdate[i]
    //e.,g "US-"+actdate[i]
   id ="US-"+actdate[i];
   url="http://127.0.0.1:8000/states/"+actdate[i]
   value = actdeath[i];
   console.log(url);
   data.push({id:id, value:value,url:url});

  }
  console.log("==== state from us ap =======\t\t\t",data)
  // Set heatmap values for each state
  polygonSeries.data = data;
  chart.events.on( "ready", updateCustomMarkers );
  chart.events.on( "mappositionchanged", updateCustomMarkers );

  // this function will take current images on the map and create HTML elements for them
  function updateCustomMarkers( event ) {

  // go through all of the images
  polygonSeries.MapPolygon.each(function(image) {
  // check if it has corresponding HTML element
  if (!image.dummyData || !image.dummyData.externalElement) {
  // create onex
  image.dummyData = {
    externalElement: createCustomMarker(image)
  };
  }

 // reposition the element accoridng to coordinates
 var xy = chart.geoPointToSVG( { longitude: image.longitude, latitude: image.latitude } );
 image.dummyData.externalElement.style.top = xy.y + 'px';
 image.dummyData.externalElement.style.left = xy.x + 'px';
  });

  }
 // this function creates and returns a new marker element
 function createCustomMarker( image ) {

 var chart = image.dataItem.component.chart;

 // create holder
 var holder = document.createElement( 'a' );
 holder.className = 'map-marker';
 holder.title = image.dataItem.dataContext.title;
 holder.style.position = 'absolute';
 holder.href = 'www.google.com';
 holder.target = '_parent';


 // maybe add a link to it?
  if ( undefined != image.url ) {
   holder.onclick = function() {
    window.location.href = image.url;
   };
    holder.className += 'map-clickable';
    }
     }//Set up heat legend
    heatLegend = chart.createChild(am4maps.HeatLegend);
    heatLegend.series = polygonSeries;
   heatLegend.align = "right";
    heatLegend.valign = "bottom";
     heatLegend.width = am4core.percent(20);
     heatLegend.marginRight = am4core.percent(4);
    heatLegend.minValue = 0;
    heatLegend.maxValue = 400000;

   // Set up custom heat map legend labels using axis ranges
    var minRange = heatLegend.valueAxis.axisRanges.create();
     minRange.value = heatLegend.minValue;
      minRange.label.text = "min";
      var maxRange = heatLegend.valueAxis.axisRanges.create();
      maxRange.value = heatLegend.maxValue;
      maxRange.label.text = "max";// Set up custom heat map legend labels using axis ranges


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

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

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

       });

注：

我已经使用了我的数据，您可以使用下面提到的 link amchart 中的数据来使用虚拟数据，我遵循与 link 中完全相同的图表， https://www.amcharts.com/demos/us-heat-map/

Answer 1

我已经通过在上面的代码中添加这一行简单的代码解决了这个问题

polygonTemplate.propertyFields.url = "url";

要完成这项工作，您必须将每个州的 URL 添加到数据系列对象中

如何在 am-chart（地图图表）中添加自定义 html 标签

How do i can add custom html tags in am-chart (map-chart)

javascript

amcharts

amcharts4