我是否可以使用 Highstock API 对绘图带进行动画处理并为每个绘图带放置多个标签

Question

我正在使用高库存API，我想在图表上绘制一些plotBands。我想知道是否有任何方法可以在绘制绘图带时对其进行动画处理，例如当宽度更改时应用于 html 元素的 CSS 过渡。我还想知道是否可以为一个绘图带分配多个标签。我在jsfiddle中看到了很多例子，其中绘图带只有一个标签，但我想为每个绘图带放置两个标签，以显示其起点和终点。

提前谢谢。

Answer 1

您可以在渲染对象上使用 Renderer.rect 并触发 animate（） 函数，而不是使用绘图带。结果，新的形状被动画化。

    var yAxis = chart.yAxis[0],
        xAxis = chart.xAxis[0],
        start = 1,
        end = 2,
        x1 = xAxis.toPixels(start),
        x2 = xAxis.toPixels(end);
    var plotBand = chart.renderer.rect(x1, chart.plotTop, 0, chart.plotHeight)
        .attr({
            fill: 'yellow',
            zIndex: 0
        })
        .add();
        plotBand.animate({
            width: x2 - x1
        });

例：

• http://jsfiddle.net/qvt5mvdL/