AmCharts 水印叠加 "Show all" 按钮

Question

当您放大 AmCharts 滚动条时，"Show all" 按钮出现并与 link 叠加到 AmCharts 网站。有没有办法强制 AmCharts link 或 "Show all" 按钮显示在左下角？

在文档中未找到任何内容。

Answer 1

的确，没有移动 "Show all" 按钮的配置选项。

但是，您可以使用 creditsPosition

设置品牌 link 的位置

即：

AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "creditsPosition": "bottom-left",
  ...
});

Answer 2

可以通过将图表的 zoomOutText 属性设置为空字符串来隐藏 "Show all" 按钮：

var chart = AmCharts.makeChart('chartdiv', {
    type: 'serial',
    zoomOutText: ''
    ...
});

并将您自己的自定义按钮放在您想要的任何位置：

HTML

<div class="container">
    <div id="chartdiv"></div>
    <button class="show-all-button">Show all</button>
</div>

CSS

.container {
    position: relative;
    ...
}

#chartdiv {
    position: relative;
    width: 100%;
    height: 100%;
}

.show-all-button {
    position: absolute;
    top: 15px;
    left: 15px;
    ...
}

要使按钮正常工作，请添加以下点击事件处理程序：

var showAllButton = document.querySelector('.show-all-button');
showAllButton.addEventListener('click', function() {
    chart.zoomOut();
});

当您需要在图表上添加自定义控件时，这种方法很有用。

AmCharts 水印叠加 "Show all" 按钮

AmCharts watermark overlays "Show all" button

amcharts