如何使用chartjs从左到右绘制线条动画的折线图?

时间:2015-11-24 08:16:36

标签: chart.js

我正在使用chartjs插件实现折线图。绘制了我的折线图 加载时从下到上。我希望这些线从左到右动画。我怎样才能改变?

1 个答案:

答案 0 :(得分:2)

您可以扩展图表并覆盖初始化覆盖中动画的起始值,如此

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function(data){
        Chart.types.Line.prototype.initialize.apply(this, arguments);
        this.eachPoints(function(point, index){
            Chart.helpers.extend(point, {
                x: this.scale.calculateX(0),
                y: this.scale.calculateY(point.value)
            });
            point.save();
        }, this);       
    }
});

然后就像使用扩展图表一样

...
new Chart(ctx).LineAlt(data);

小提琴 - http://jsfiddle.net/kLg5ntou/