在不重新绘制整个图表的情况下更改条形值

Question

是否可以在不重新绘制整个图表的情况下动态更改已生成图表中的条形值并对其进行动画处理（如 css-height/width 上的过渡）？

Answer 1

没有。但别担心 - canvas 和 SVG 的绘图速度很快。

您可以使用 canvas 条形图为一组新值的变化设置动画，方法是为增长效果提供一个新数据集 - 下载中的演示目录中有一个名为的示例demos/effects-bar-grow.html 源代码是这样的：

bar = new RGraph.Bar({
    id: 'cvs',
    data: [4,8,6,3,1,2,5],
    options: {
        textSize: 16,
        xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
        shadowBlur: 0,
        shadowOffsetx: 2,
        shadowOffsety: 2,
        colorsStroke: 'rgba(0,0,0,0)',
        backgroundGridVlines: false,
        backgroundGridBorder: false,
        xaxis: false,
        colors: ['Gradient(#d0d:#303)']
    }
}).grow();

setInterval(function ()
{
    var data = RGraph.arrayRandom(7, 0, 10);

    bar.grow({data: data});
}, 3000);

当然 canvas 上的动画需要每秒重复多次重绘整个图表。

在不重新绘制整个图表的情况下更改条形值

change bar values without redrawing the whole chart

rgraph