图表.js 2，从右到左(不是自上而下）进行动画处理

chart.js 2, animate right to left (not top-down)

本文关键字：自上而下 处理 动画 js 从右到左 图表      更新时间：2023-09-26

下面的jsfiddle显示了问题。

第一次数据插入很好，但是当数据集的长度上限为 10 时，您会看到不希望出现的行为，即数据点自上而下动画而不是向左移动。这非常分散注意力。

http://jsfiddle.net/kLg5ntou/32/

setInterval(function () {
 data.labels.push(Math.floor(Date.now() / 1000));
 data.datasets[0].data.push(Math.floor(10 + Math.random() * 80));
 // limit to 10
 data.labels = data.labels.splice(-10);
 data.datasets[0].data = data.datasets[0].data.splice(-10);
 chart.update(); // addData/removeData replaced with update in v2
}, 1000);

有没有办法让折线图向左移动，让新插入的数据点出现在右侧？而不是波浪形分散注意力的动画？

谢谢

此代码使用流式处理插件并按预期工作。

http://jsfiddle.net/nagix/kvu0r6j2/

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.5.0/dist/chartjs-plugin-streaming.min.js"></script>

var ctx = document.getElementById("chart").getContext("2d");
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [],
        datasets: [{
            label: "My First dataset",
            backgroundColor: "rgba(95,186,88,0.7)",
            borderColor: "rgba(95,186,88,1)",
            pointBackgroundColor: "rgba(0,0,0,0)",
            pointBorderColor: "rgba(0,0,0,0)",
            pointHoverBackgroundColor: "rgba(95,186,88,1)",
            pointHoverBorderColor: "rgba(95,186,88,1)",
            data: []
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'realtime'
            }]
        },
        plugins: {
            streaming: {
                onRefresh: function(chart) {
                    chart.data.labels.push(Date.now());
                    chart.data.datasets[0].data.push(
                        Math.floor(10 + Math.random() * 80)
                    );
                },
                delay: 2000
            }
        }
    }
});

你应该使用 2.5.0 chartsjs

在这里它工作：http://jsfiddle.net/kLg5ntou/93

var data = {
labels: ["0", "1", "2", "3", "4", "5", "6"],
datasets: [
    {
        label: "My First dataset",
        fillColor: "rgba(95,186,88,0.7)",
        strokeColor: "rgba(95,186,88,1)",
        pointColor: "rgba(0,0,0,0)",
        pointStrokeColor: "rgba(0,0,0,0)",
        pointHighlightFill: "rgba(95,186,88,1)",
        pointHighlightStroke: "rgba(95,186,88,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    }
]
};
var ctx = document.getElementById("chart").getContext("2d");
var chart = new Chart(ctx, {type: 'line', data: data});
setInterval(function () {
 chart.config.data.labels.push(Math.floor(Date.now() / 1000));
 chart.config.data.datasets[0].data.push(Math.floor(10 + Math.random() * 80));
 // limit to 10
 chart.config.data.labels.shift();
 chart.config.data.datasets[0].data.shift();
相关文章：