Question

在Amchart的商店中，有一项功能可以将图表的图例放在其他div中。我用Ammap的valueLegends尝试了相同的概念。给了divId，但不起作用。有什么办法可以将valueLegends放在其他div中？

var map = AmCharts.makeChart("chartdiv", {
  "type": "map",
  "theme": "light",
  "colorSteps": 10,
  "margin-top": 200,
  "dataProvider": {
    "map": "usaLow",
    "areas": [{
      "id": "US-AL",
      "value": 4447100
    }, {
      "id": "US-AK",
      "value": 626932
    }, {
      "id": "US-AZ",
      "value": 5130632
    }]
  },

  "areasSettings": {
    "autoZoom": true
  },

  "valueLegend": {
    "divId": "legenddiv",
    "width": document.getElementById("chartdiv").offsetWidth - 10,
    "left": 10,
    "bottom": 0,
    "minValue": "little",
    "maxValue": "a lot!"
  },

  "export": {
    "enabled": true
  }

});

#chartdiv {
  width: 100%;
  height: 400px;
}

#legenddiv {
  border: 2px solid red;
  margin: 5px 0 20px 0;
  position: relative;
}

<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaLow.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
<div id="legenddiv"></div>

Answer 1

Marker marker = null; protected void onPostExecute(Coordinates coordinates) { LatLng latLong = new LatLng("lat", "long"); if (marker == null) { MarkerOptions options = new MarkerOptions().position(latLong) .title("Marker Title"); marker = mMap.addMarker(options); } else { marker.setPosition(latLong); } mMap.moveCamera(CameraUpdateFactory.newLatLng(latLong)); mMap.animateCamera(CameraUpdateFactory.zoomTo(16f)); }仅适用于regular legends； divId中没有对此的内置支持。

您可以解决此问题，方法是在valueLegend / init事件触发后添加代码，以将图例svg节点克隆到您的外部div中，并隐藏原始的drawn，如下所示：

valueLegend

它不会是非常敏感的，因为它将是图例的静态副本，并且会被调整大小。我建议不要在listeners: [ { event: "init", method: function(e) { setTimeout(function() { var legend = document.getElementsByClassName( "amcharts-value-legend" )[0]; // clone legend node var cln = legend.cloneNode(true); // set a new position for the legend svg cln.setAttribute("transform", "translate(10,30)"); //Create svg elem to hold the legend svg var newSVG = document.createElementNS( "http://www.w3.org/2000/svg", "svg" ); newSVG.append(cln); newSVG.style.width = "100%"; // place the svg inside the legend div document.getElementById("legenddiv").appendChild(newSVG); }, 100); } } ]中设置自己的宽度，在这种情况下，请使用默认宽度，但这是一个演示示例，可以保留您的宽度设置：

valueLegend

var map = AmCharts.makeChart("chartdiv", {
  type: "map",
  theme: "light",
  colorSteps: 10,
  "marginTop": 200,
  dataProvider: {
    map: "usaLow",
    areas: [
      {
        id: "US-AL",
        value: 4447100
      },
      {
        id: "US-AK",
        value: 626932
      },
      {
        id: "US-AZ",
        value: 5130632
      }
    ]
  },

  areasSettings: {
    autoZoom: true
  },

  valueLegend: {
    divId: "legenddiv",
    width: document.getElementById("chartdiv").offsetWidth - 10,
    left: 10,
    bottom: 0,
    minValue: "little",
    maxValue: "a lot!"
  },

  export: {
    enabled: true
  },

  listeners: [
    {
      event: "init",
      method: function(e) {
        setTimeout(function() {
          var legend = document.getElementsByClassName(
            "amcharts-value-legend"
          )[0];
          // clone legend node
          var cln = legend.cloneNode(true);
          // set a new position for the legend svg
          cln.setAttribute("transform", "translate(10,30)");
          //Create svg elem to hold the legend svg
          var newSVG = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "svg"
          );
          newSVG.append(cln);
          newSVG.style.width = "100%";
          // place the svg inside the legend div
          document.getElementById("legenddiv").appendChild(newSVG);
        }, 100);
      }
    }
  ]
});

#chartdiv {
  width: 100%;
  height: 400px;
}

#legenddiv {
  border: 2px solid red;
  margin: 5px 0 20px 0;
  position: relative;
}

#chartdiv .amcharts-value-legend {
  visibility: hidden;
}

如何在Amchart的Ammap中的另一个div中放置valueLegend？

1 个答案: