Question

我想在我的amcharts图表中包含指南，我发现了非常具有描述性的例子。然而，我在标签文本的定位方面苦苦挣扎，特别是在指南非常接近标签重叠的情况下。

以下是示例代码https://jsfiddle.net/Tripy/1wwygcy7/2/

HTML：

/(\w*(?:[aeiou]{2})\w+(?:[aeiou]{2})\w*)/g

使用Javascript：

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv" style="width: 100%; height: 500px;"></div>

如果标签重叠，请知道如何在指南下方推送标签文字。也许使用类名为amcharts-guide- [id]的CSS代码？

Answer 1

没有办法通过指南属性属性执行此操作，但您可以使用css类名称进行正确的预感。将addClassNames设置为true，提供您的指南ID，然后在您的库存面板中添加drawn事件监听器，通过调用querySelector来直接调整所需的指南.amcharts-guide-[id] tspan选择器并调整y属性：

AmCharts.makeChart("chartdiv", {
  "addClassNames": true,
  // ...
  "stockPanels": [{
    "valueAxes": [{
      "guides": [{
        "id": "guide-1",
        // ..
      }, {
        "id": "guide-2",
        // ..
      }]
    }],
    "listeners": [{
      "event": "drawn",
      "method": function() {
        var guide2Text = document.querySelector('.amcharts-guide-guide-2 tspan');
        if (guide2Text) {
          guide2Text.setAttribute('y', 20);
        }
      }
    }]    
  }],
  // ..
});

Updated fiddle

如果文本在amcharts中重叠，则偏移指南标签

1 个答案: