如何用畫布制作動畫條形圖？

Question

在此處查看我要執行的操作的示例： http : //www.chartjs.org/ 。 我正在嘗試復制標題，一直在移動條形圖。 我試圖使那里工作，但似乎沒有工作。 我可以看到他們有

<div class="aspect-ratio">
        <canvas width='1200' height='480' id="hero-bar"></canvas>
        <header>
        </header>
</div>

我認為這是使它起作用的js：

<script type="text/javascript">
(function(){
var data = [],
    barsCount = 50,
    labels = new Array(barsCount),
    updateDelayMax = 500,
    $id = function(id){
        return document.getElementById(id);
    },
    random = function(max){ return Math.round(Math.random()*100)},
    helpers = Chart.helpers;


Chart.defaults.global.responsive = true;


for (var i = barsCount - 1; i >= 0; i--) {
    data.push(Math.round(Math.random() * 100));
};
new Chart($id('hero-bar').getContext('2d')).Bar({
    labels : labels,
    datasets : [{
        fillColor : '#2B303B',
        data : data
    }]
},{
    showScale : false,
    barShowStroke : false,
    barValueSpacing: 1,
    showTooltips : false,
    onAnimationComplete : function(){
        // Get scope of the hero chart during updates
        var heroChart = this,
            timeout;
        // Stop this running every time the update is fired
        this.options.onAnimationComplete = randomUpdate;

        this.options.animationEasing = 'easeOutQuint';

        randomUpdate();

        function randomUpdate(){
            heroChart.stop();
            clearTimeout(timeout);
            // Get a random bar
            timeout = setTimeout(function(){
                var randomNumberOfBars = Math.floor(Math.random() * barsCount),
                    i;
                for (i = randomNumberOfBars - 1; i >= 0; i--) {
                    heroChart.datasets[0].bars[Math.floor(Math.random() * barsCount)].value = Math.round(Math.random() * 100);
                };
                heroChart.update();
            },Math.random() * updateDelayMax);
        };
    }
});
 }); 
    </script>

任何想法如何使這項工作？

Answer 1

這是ChartJS.org中隨機變化的Hero的工作版本

 var data = [], barsCount = 50, labels = new Array(barsCount), updateDelayMax = 500, $id = function(id){ return document.getElementById(id); }, random = function(max){ return Math.round(Math.random()*100)}, helpers = Chart.helpers; Chart.defaults.global.responsive = true; for (var i = barsCount - 1; i >= 0; i--) { data.push(Math.round(Math.random() * 100)); }; new Chart($id('hero-bar').getContext('2d')).Bar({ labels : labels, datasets : [{ fillColor : '#2B303B', data : data }] },{ showScale : false, barShowStroke : false, barValueSpacing: 1, showTooltips : false, onAnimationComplete : function(){ // Get scope of the hero chart during updates var heroChart = this, timeout; // Stop this running every time the update is fired this.options.onAnimationComplete = randomUpdate; this.options.animationEasing = 'easeOutQuint'; randomUpdate(); function randomUpdate(){ heroChart.stop(); clearTimeout(timeout); // Get a random bar timeout = setTimeout(function(){ var randomNumberOfBars = Math.floor(Math.random() * barsCount), i; for (i = randomNumberOfBars - 1; i >= 0; i--) { heroChart.datasets[0].bars[Math.floor(Math.random() * barsCount)].value = Math.round(Math.random() * 100); }; heroChart.update(); },Math.random() * updateDelayMax); }; } }); 

 body{ background-color: ivory; } #canvas{border:1px solid red;} .aspect-ratio{background-color:#232830} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> <div class="aspect-ratio"> <canvas width='1200' height='480' id="hero-bar"></canvas> <header></header> </div>