如何使用chartjs从左到右绘制带有线动画的线图？ [英] how to draw line graph with line animation from left to right using chartjs?

问题描述

我正在使用chartjs插件实现折线图。加载时，我的线图是从下到上绘制
的。我希望线条从左到右。如何更改？

I am implementing the line graph using chartjs plugin. My line graph is drawn from bottom to top when loading. I would like the lines animated from left to right. How can I change?

推荐答案

您可以扩展图表并在初始化覆盖中覆盖动画的起始值，如下所示

You can extend the chart and override the starting values for the animation in the initialize override, like so

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

然后只使用扩展图表，就像这样

Then just use the extended chart, like so

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

---

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

这篇关于如何使用chartjs从左到右绘制带有线动画的线图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！