如何在am-chartmap-chart中添加自定义html标签

问题描述

我正在尝试在美国各州添加自定义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");

       }); 

注意：

我已经使用了我的数据，您可以将amchart中的数据用作要使用的虚拟数据的链接，下面已经提到了与链接中相同的图表， https://www.amcharts.com/demos/us-heat-map/

解决方法

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

$.ajax()

要执行此操作，您必须将每个状态的URL添加到数据系列对象中