Как разместить valueLegend в другом элементе Ammap в Ammap? - PullRequest
Новая
       11

Как разместить valueLegend в другом элементе Ammap в Ammap?

0 голосов
/ 05 июля 2018

В Amchart есть функциональность, позволяющая помещать легенды диаграмм в другие разделы. Я попробовал ту же концепцию с valueLegends Ammap. Дали 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>

1 Ответ

0 голосов
/ 05 июля 2018

divId работает только с обычными легендами ; в valueLegend.

нет встроенной поддержки для этого.

Вы можете обойти эту проблему, добавив код после запуска события init / drawn, чтобы клонировать узел svg legend в ваш внешний 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>
...