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

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

最佳答案

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>