Question

下面的jsfiddle显示了问题。

第一个数据插入很好，但是当数据集的长度上限为10时，您会看到不希望的行为，其中数据点是自上而下动画而不是向左移动。这非常令人分心。

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

有没有办法让折线图左移，新插入的数据点出现在右边？与波浪分散注意力的动画相反？

感谢

Answer 1

您应该使用2.5.0 chartjs

这里有效： http://jsfiddle.net/kLg5ntou/93

Image ID    Image Title       Image Caption     Attachments

4867        Bedroom           Bedroom           {"image_attachments":[{"id":"4867","fields":{"title":"Bedroom","caption":"Bedroom"}}]}
4866|4865   Office|Kitchen    Office|Kitchen    {"image_attachments":[{"id":"4866","fields":{"title":"Office","caption":"Office"}}]},{"image_attachments":[{"id":"4865","fields":{"title":"Kitchen","caption":"Kitchen"}}]}

Answer 2

此代码使用streaming plugin并按预期工作。

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

chart.js 2，从右到左动画（不是自上而下）

2 个答案: