typescript - AmCharts 4 中的可滚动外部图表图例

Question

如何在 AmCharts 4 中实现与此 AmCharts 3 教程相同的效果，即有一个可滚动的图例以避免图例占用所有可用空间？

在 AmCharts 4.legend.divId中不再存在，到目前为止我只能用 来控制图例大小chart.legend.height = am4core.percent(50);，控制是有限的，因为整个东西被渲染为单个 SVG 元素......

我想需要创建一个单独的容器legend.parent = container;，然后通过设置“附加”图例，但还不能使其工作。

当前尝试：codepen

标签： typescriptamcharts

Answer 1

您可以使用容器来定义图例的元素并将其设置为图例的父属性。

var legendContainer = am4core.create("legenddiv", am4core.Container);
legendContainer.width = am4core.percent(100);
legendContainer.height = am4core.percent(100);
chart.legend.parent = legendContainer;

请在此处查看以下示例和更多信息。

/**
 * --------------------------------------------------------
 * This demo was created using amCharts V4 preview release.
 * 
 * V4 is the latest installement in amCharts data viz
 * library family, to be released in the first half of
 * 2018.
 *
 * For more information and documentation visit:
 * https://www.amcharts.com/docs/v4/
 * --------------------------------------------------------
 */

/* Set theme(s) */
am4core.useTheme(am4themes_animated);

/* Create chart */
var chart = am4core.create("chartdiv", am4charts.PieChart);

/* Add data */
chart.data = [{
    "country": "Lithuania",
    "litres": 501.9
}, {
    "country": "Czech Republic",
    "litres": 301.9
}, {
    "country": "Ireland",
    "litres": 201.1
}, {
    "country": "Germany",
    "litres": 165.8
}, {
    "country": "Australia",
    "litres": 139.9
}, {
    "country": "Austria",
    "litres": 128.3
}, {
    "country": "UK",
    "litres": 99
}, {
    "country": "Belgium",
    "litres": 60
}, {
    "country": "The Netherlands",
    "litres": 50
}, {
    "country": "Hungary",
    "litres": 50
}, {
    "country": "Poland",
    "litres": 50
}, {
    "country": "Greece",
    "litres": 50
}, {
    "country": "Italy",
    "litres": 50
}, {
    "country": "France",
    "litres": 50
}, {
    "country": "Spain",
    "litres": 50
}];

/* Create series */
var series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = "litres";
series.dataFields.category = "country";

/* Disable labels */
series.labels.template.disabled = true;
series.ticks.template.disabled = true;

/* Create legend */
chart.legend = new am4charts.Legend();

/* Create a separate container to put legend in */
var legendContainer = am4core.create("legenddiv", am4core.Container);
legendContainer.width = am4core.percent(100);
legendContainer.height = am4core.percent(100);
chart.legend.parent = legendContainer;

chart.events.on("datavalidated", resizeLegend);
chart.events.on("maxsizechanged", resizeLegend);

function resizeLegend(ev) {
  document.getElementById("legenddiv").style.height = chart.legend.contentHeight + "px";
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv, #legendwrapper {
  width: 48%;
  height: 200px;
  border: 1px dotted #c99;
  margin: 1em 0;
  display: inline-block;
  float: left;
}

#legenddiv {
  height: 100%;
}

#legendwrapper {
  overflow-x: none;
  overflow-y: auto;
}

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>

<div id="chartdiv"></div>

<div id="legendwrapper">
  <div id="legenddiv"></div>
<div>