Question

我在amstockcharts中使用Trend line。它们很好，只是它们总是堆叠在其他图形之上。是否有可能将其置于后面？

Answer 1

在SVG中，HTML中没有z-Index。最后添加的元素是在其他元素之上绘制的。因此，虽然没有支持您的请求的AmCharts功能，但您可以手动重绘所有图表，以便它们再次位于趋势线之上。

要执行此操作，请使用“appendChild()”将元素重新附加到SVG。
现在每次绘制图表时都要执行此操作。为此，我们需要一个“drawn”的事件监听器（在调整图表大小时调用）和一个“zoomed”的事件监听器（显然我认为）。

这是结果代码：

chart.addListener("zoomed", drawGraphsOnTop);
chart.addListener("drawn", drawGraphsOnTop);

function drawGraphsOnTop() {
    for (var i = 0; i < chart.graphs.length; i++) {
        chart.graphs[i].set.D.container.appendChild(chart.graphs[i].set.node);
    }
}

我还为此准备了fiddle。

修改
我找到了一个更好的方法来做到这一点。（更新了fiddle）

function drawGraphsOnTop() { chart.graphsSet.toFront(); }

（实际上你也可以更好地适应你的问题chart.trendlinesSet.toBack()，但趋势线甚至可以在网格后面了）

<强>解释
该图表由多个“集合”组成。对于每种类型的组件，都有一个集合（例如GraphsSet，AxesSet，CursorSet，......），每个单独的组件都有自己的集合（例如graph.set）。
您可以调用.toFront()或{{ 1}}为每个人改变他们的图层。请注意，对于单个集合，这仅会更改内部类型集合。（这意味着你例如在所有其他图表之上设置一个图形但不在所有其他图表元素之上，为此你必须移动整个图形集）

Amcharts Trendline堆栈背后

1 个答案: