plottable.js折线图中的自定义动画

Custom animation in plottable.js line chart

本文关键字:自定义 动画 js 折线图 plottable      更新时间:2023-09-26

当数据更新时,我正尝试在plottable.js中使用自定义动画。以下是我的代码:-

<script type="text/javascript">
    var xScale = new Plottable.Scales.Category();
    var yScale = new Plottable.Scales.Linear().domain([0,30]);
    var xAxis = new Plottable.Axes.Category(xScale, "bottom");
    var yAxis = new Plottable.Axes.Numeric(yScale, "left");
    var dataset;
    var data;
    function createChart() {
        data = [];
        for(var i=0; i<10; i++) {
            data.push({x:"Data" + (i + 1),y:Math.abs(Math.random() * 10)});
        }
        dataset = new Plottable.Dataset(data);
        makeChart();
    }
    function updateChart() {
        data = [];
        for(var i=0; i<10; i++) {
            data.push({x:"Data" + (i + 1),y:Math.abs(Math.random() * 10)});
        }
        dataset.data(data);
    }
    function makeChart() {
        var linePlot = new Plottable.Plots.Line()
            .addDataset(dataset)
            .x(function(d) { return d.x; }, xScale)
            .y(function(d) { return d.y; }, yScale)
            .attr("stroke","#FA8116")
            .animated(true)
            .animator("test",new Plottable.Animators.Easing().easingMode("bounce"));
        var label_y = new Plottable.Components.AxisLabel("Parameter 2", -90);
        var label_x = new Plottable.Components.AxisLabel("Parameter 1", 0);
        var chart = new Plottable.Components.Table([
        [label_y, yAxis, linePlot],
        [null, null, xAxis],
        [null, null, label_x]
        ]);
        chart.renderTo("svg#lineChart");
        // Responsive Layout
        window.addEventListener("resize", function() {
            chart.redraw();
        });
    }   
    $(document).ready(function() {
        createChart();
        setInterval(function(d) {
            updateChart();
        },5000);
    });
</script>

我想动画线图,而不是默认的,我做了这个:-

var linePlot = new Plottable.Plots.Line()
            .addDataset(dataset)
            .x(function(d) { return d.x; }, xScale)
            .y(function(d) { return d.y; }, yScale)
            .attr("stroke","#FA8116")
            .animated(true)
            .animator("test",new Plottable.Animators.Easing().easingMode("bounce"));

我不明白我在哪里是正确的,既然我是plottable的新手,你们能帮我吗?还有没有一种方法可以将基于d3的动画与plottable一起使用??如果是,你能提供一个代码片段吗

提前Thanx

Plot通常有两个AnimatorMAINRESET。您需要指定要更改Plot:上的主Animator

plot.animator(Plottable.Plots.Animator.MAIN,
    new Plottable.Animators.Easing().easingMode("bounce"));