如何在amchart中制作不同颜色的标记

Question

import React, { Component } from 'react';
import * as am4core from "@amcharts/amcharts4/core";
// import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import * as am4maps from "@amcharts/amcharts4/maps";
import am4geodata_worldLow from "@amcharts/amcharts4-geodata/indiaLow";
import am4themes_frozen from "@amcharts/amcharts4/themes/frozen";

import './style.css'


am4core.useTheme(am4themes_frozen);

class WorldMap extends Component {
    constructor(props){
        super(props);
        this.state = {
            bubble:{}
        }
    }
componentDidMount() {
    let chart = am4core.create("worldmap", am4maps.MapChart);
    chart.geodata = am4geodata_worldLow;
    chart.projection = new am4maps.projections.Miller();
    let polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
    polygonSeries.exclude = ["AQ"];
    polygonSeries.useGeodata = true;
    let polygonTemplate = polygonSeries.mapPolygons.template;
    polygonTemplate.tooltipText = "{name}";
    polygonTemplate.fill = chart.colors.getIndex(0).lighten(0.5);

    let hs = polygonTemplate.states.create("hover");
    hs.properties.fill = chart.colors.getIndex(0);

    let imageSeries = chart.series.push(new am4maps.MapImageSeries());
    imageSeries.mapImages.template.propertyFields.longitude = "longitude";
    imageSeries.mapImages.template.propertyFields.latitude = "latitude";
    imageSeries.data = [ {
        "zoomLevel": 5,
        "scale": 0.5,
        "title": "Odisha",
        "latitude": 20.29,
        "longitude": 85.82,
        }, {
        "zoomLevel": 5,
        "scale": 0.5,
        "title": "Karnataka",
        "latitude": 12.99,
        "longitude": 77.71,
        }, {
        "zoomLevel": 5,
        "scale": 0.5,
        "title": "Andhra Pradesh",
        "latitude": 14.99,
        "longitude": 77.71,
        }
    ];

    chart.events.on( "mappositionchanged", updateCustomMarkers );

    function updateCustomMarkers( event ) {

    imageSeries.mapImages.each(function(image) {
        if (!image.dummyData || !image.dummyData.externalElement) {
            image.dummyData = {
                externalElement: createCustomMarker(image)
            };
        }

        let 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 ) {

    let chart = image.dataItem.component.chart;

    // create holder
    let holder = document.createElement( 'div' );
    holder.className = 'map-marker';
    holder.title = image.dataItem.dataContext.title;
    holder.style.position = 'absolute';

    // maybe add a link to it?
    if ( undefined != image.url ) {
        holder.onclick = function() {
        window.location.href = image.url;
        };
        holder.className += ' map-clickable';
    }



    // create dot
    let dot = document.createElement( 'div' );
    dot.className = 'dot';
    holder.appendChild( dot );

    // create pulse
    let pulse = document.createElement( 'div' );
    pulse.className = 'pulse';
    holder.appendChild( pulse );

    // append the marker to the map container
    chart.svgContainer.htmlElement.appendChild( holder );

    return holder;
    }

}


    componentWillUnmount() {
        if (this.chart) {
        this.chart.dispose();
        }
    }



    render() {
        return (
            <div id="worldmap" style={{ width: "100%", height: "500px" }}></div>
        );
    }
}

export default WorldMap;

我在这里使用带有 React 的 amcharts。

请看我的截图。

我想要完全一样的，它即将到来，但是， 那些即将变黄的标记我想将一些标记更改为红色和绿色。

这样可以吗？？

我已经分享了下面的截图，请看一下。

我是从 amcharts 地图演示中找到的

Answer 1

所以，React 在这里是无关紧要的。您复制的演示是我们的"Custom HTML Elements as Map Markers" demo。

您已经分享了一些 JavaScript 代码，但由于这些标记是纯 HTML，它们是通过 CSS 设置样式的。这是演示中的 CSS：

#chartdiv {
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.map-marker {
    /* adjusting for the marker dimensions
    so that it is centered on coordinates */
    margin-left: -8px;
    margin-top: -8px;
}
.map-marker.map-clickable {
    cursor: pointer;
}
.pulse {
    width: 10px;
    height: 10px;
    border: 5px solid #f7f14c;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color: #716f42;
    z-index: 10;
    position: absolute;
  }
.map-marker .dot {
    border: 10px solid #fff601;
    background: transparent;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    height: 50px;
    width: 50px;
    -webkit-animation: pulse 3s ease-out;
    -moz-animation: pulse 3s ease-out;
    animation: pulse 3s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    position: absolute;
    top: -20px;
    left: -20px;
    z-index: 1;
    opacity: 0;
  }
  /* keyframe stuff here */

这就是黄色背景颜色的原因：

.pulse {
    /*...*/
    background-color: #716f42;
    /*...*/
}

如果您想更改背景颜色，可以通过.pulse div 上的background-color 声明来完成。您可以添加更多 CSS 类（在.pulse 之后），例如

.pulse--red {
  background-color: red;
}
.pulse--green {
  background-color: green;
}

或者您可以在数据中传递颜色键，例如

    {
    "zoomLevel": 5,
    "scale": 0.5,
    "title": "Karnataka",
    "latitude": 12.99,
    "longitude": 77.71,
    "color": "red"
    }

我不确定您更改颜色的逻辑是什么，但假设我们想将 3 个标记中的每 2 个更改为红色，3 个标记中的每 3 个更改为绿色，这是一个更新的 createCustomMarker 函数，它使用来自数据并添加额外的pulse--* 类：

// keep a counter for fuzzy color logic
var markers = 0;

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

  var chart = image.dataItem.component.chart;

  // create holder
  var holder = document.createElement( 'div' );
  holder.className = 'map-marker';
  holder.title = image.dataItem.dataContext.title;
  holder.style.position = 'absolute';

  // maybe add a link to it?
  if ( undefined != image.url ) {
    holder.onclick = function() {
      window.location.href = image.url;
    };
    holder.className += ' map-clickable';
  }

  // create dot
  var dot = document.createElement( 'div' );
  dot.className = 'dot';
  holder.appendChild( dot );

  // create pulse
  var pulse = document.createElement( 'div' );
  pulse.className = 'pulse';
  // logic for switching colors
  switch (markers) {
    case 1:
      pulse.className += " pulse--red";
      ++markers;
      break;
    case 2:
      pulse.className += " pulse--green";
      markers = 0;
      break;
    default:
      ++markers;
      break;
  }
  // or apply color via data
  var color = image.dataItem.dataContext.color;
  if (color) {
    // pulse.setAttribute('style', 'background-color: ' + color + ' !important');
    // or
    pulse.style.backgroundColor = color;
  }
  holder.appendChild( pulse );

  // append the marker to the map container
  chart.svgContainer.htmlElement.appendChild( holder );

  return holder;
}

这是我们演示的一个分支：

https://codepen.io/team/amcharts/pen/6fad5b27c1456e6288032c5aaaae0c3e