Добавить элемент HTML поверх экземпляра Amchart - PullRequest
Новая
       2

Добавить элемент HTML поверх экземпляра Amchart

0 голосов
/ 30 марта 2019

Я не могу найти это в документации, но возможно ли добавить пользовательский элемент div поверх экземпляра Amchart?

Такой, что: 

    <div class="container-fluid px-0 mx-0">
        <div id="chartdiv"></div>
        <ul>
            <li>Thailand</li>
            <li>Myanmar</li>
            <li>Etc...</li>
        </ul>
    </div>

С помощьюUL отображается в нижней части экземпляра?

JS: 

    <script src="https://www.amcharts.com/lib/4/core.js"></script>
    <script src="https://www.amcharts.com/lib/4/maps.js"></script>
    <script src="https://www.amcharts.com/lib/4/geodata/worldUltra.js"></script>
    <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
    <script>

       am4core.useTheme(am4themes_animated);

       var container = am4core.create("chartdiv", am4core.Container);
       container.width = am4core.percent(100);
       container.height = am4core.percent(100);
       container.layout = "vertical";

       // Create map instance
       var chart = container.createChild(am4maps.MapChart);

       // Set map definition
       chart.geodata = am4geodata_worldUltra;

       // Set projection
       chart.projection = new am4maps.projections.Miller();

       // Create map polygon series
       var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

       // Exclude Antartica
       polygonSeries.exclude = ["AQ"];

       // Make map load polygon (like country names) data from GeoJSON
       polygonSeries.useGeodata = true;

       // Configure series
       var polygonTemplate = polygonSeries.mapPolygons.template;
       polygonTemplate.tooltipText = "{name}";
       polygonTemplate.fill = am4core.color("#dcdcdc");

       // Create hover state and set alternative fill color
       var hs = polygonTemplate.states.create("hover");
       hs.properties.fill = am4core.color("#a98239");

       chart.events.on("ready", function(ev) {
         chart.zoomToMapObject(polygonSeries.getPolygonById("TH"));
       });

       chart.zoomControl = new am4maps.ZoomControl();
       chart.chartContainer.wheelable = false;



    </script>

Если я что-то пропустил в документах, я прошу прощения - надеюсь, что кто-то может указать мне правильное направление!

1 Ответ

2 голосов
/ 02 апреля 2019

AmCharts основан на SVG, поэтому все в чарте разделено под управлением библиотеки и в основном содержит SVG с небольшим количеством HTML, без каких-либо встроенных опций для включения пользовательских объектов div.Одним из возможных путей решения этой проблемы является использование объекта Label и установка его свойства html для включения вашего HTML-кода.Обратите внимание, что для этого используется <foreignObject>, поэтому вам, возможно, следует помнить о поддержке браузера (IE11, если это все еще имеет значение).

Вот пример, который создает список наверхняя часть графика 

var label = chart.chartContainer.createChild(am4core.Label);
//label.isMeasured = false; //uncomment to make the label not adjust the rest of the chart elements to accommodate its placement
label.fontSize = 16;
label.x = am4core.percent(5);
label.horizontalCenter = "middle";
label.verticalCenter = "bottom";
label.html = "<ul><li>List item 1</li><li>List item 2</li></ul>";
label.toBack(); //move list to top of the chart area. See: https://www.amcharts.com/docs/v4/concepts/svg-engine/containers/#Ordering_elements

Демонстрация: 

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "category": "Research",
  "value": 450
}, {
  "category": "Marketing",
  "value": 1200
}, {
  "category": "Distribution",
  "value": 1850
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
//categoryAxis.renderer.minGridDistance = 30;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";

var label = chart.chartContainer.createChild(am4core.Label);
//label.isMeasured = false; //uncomment to make the label not adjust the rest of the chart elements to accommodate its placement
label.fontSize = 16;
label.x = am4core.percent(5);
label.horizontalCenter = "middle";
label.verticalCenter = "bottom";
label.html = "<ul><li>List item 1</li><li>List item 2</li></ul>";
label.toBack(); //move list to top of the chart area. See: https://www.amcharts.com/docs/v4/concepts/svg-engine/containers/#Ordering_elements
html, body { width: 100%; height: 100%; margin: 0;}
#chartdiv { width: 100%; height: 100%;}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>
...