我可以使用Highstock API为绘图带设置动画，并在每个绘图带上放置多个标签吗？

Question

I am using the highstock API, and I want to draw some plotBands on a chart. I would like to know if there is any way to animate the plotband while it is being drawed, like CSS transitions applied to html elements when their width change. I also want to know if I can assign more than one label to one plotband. I have seen a lot of examples in jsfiddle where a plotband has only one label, but I would like to put two labels for each plotband in order to show its start point and its end point.

Thanks in advance.

Answer 1

You can use the Renderer.rect and trigger animate() function on rendered object, instead of using plotbands. As a result new shape is animated.

    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
        });

Example:

• http://jsfiddle.net/qvt5mvdL/