javascript - 如何将值 Legend 放置在 Amcharts Ammap 的另一个 div 中？

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

divId 仅适用于 regular legends ; valueLegend 中没有对此的内置支持。

您可以通过在 init/drawn 事件触发后添加代码来解决此问题，将图例 svg 节点克隆到外部 div 中并隐藏原始 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;
}

<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>