我如何创建一个像chartsjs一样移动图形的背景？ [英] How can i create a background of moving graphs like chartsjs?

问题描述

如果我进入

我想要实现的是这些文本和按钮背后的移动图形墙纸。我想知道如何在我的网站上实现这一目标？

这是一个真实的图表吗？或者只是一个动画picutre？

谢谢！

解决方案

这是Chart.JS中的一个应有图表，当您检查该元素位于<$ c $时c>< canvas id =hero-bar> 。然后，您可以通过在JavaScript中查找标识为 hero-bar 的元素来查找该图表的工作方式。该条形图的代码恰好从源代码行108-161开始（ http://www.chartjs.org

在这种情况下，这些值只是在计时器上随机化的，下面是该页面上该图表的源代码：

/ p>

  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）}，$ b $ helpers = Chart.helpers; 
 
 
 Chart.defaults.global.responsive = true; 
 
 
 for（var i = barsCount  -  1; i> = 0; i--）{
 data.push（Math.round（Math.random（）* 100））; 
}; 
新图表（$ id（'hero-bar'）。getContext（'2d'））。Bar（{
 labels：labels，
 datasets：[{
 fillColor： '＃2B303B'，
 data：data 
}] 
}，{
 showScale：false，
 barShowStroke：false，
 barValueSpacing：1，
 showTooltips：false，
 onAnimationComplete：function（）{
 //在更新期间获取英雄图的范围
 var heroChart = this，
 timeout; 
 //每次更新被触发时停止运行
 this.options.onAnimationComplete = randomUpdate; 
 
 this.options.animationEasing ='easeOutQuint'; 
 
 randomUpdate （）; 
 
函数randomUpdate（）{
 heroChart.stop（）; 
 clearTimeout（timeout）; 
 //获取一个随机条
 timeout = setTimeo ut（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）; 
}; 
} 
}）; 
  

If i go into the website http://www.chartjs.org/ ,

I see the wallpaper of moving graphs as shown:

What i want to achieve is the moving graph wallpaper behind these texts and buttons. I was wondering how do i achieve that on my website?

Is it a real graph? Or just an animated picutre?

Thanks !

解决方案

This is an accual chart made in Chart.JS, note when you inspect that element it is on a <canvas id="hero-bar">. Then you can find how that chart works by looking in the JavaScript for the element with an id of hero-bar. The code for that bar chart happens to be starting on lines 108-161 in the source ( http://www.chartjs.org/) of the page.

In this case the values are simply randomized on a timer, below is the source code for that chart on thier page:

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

这篇关于我如何创建一个像chartsjs一样移动图形的背景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！