我怎样才能创建像chartsjs这样的移动图形的背景?

2022-01-22 00:00:00 graph javascript html css chart.js

如果我进入网站

我想要实现的是这些文本和按钮背后的动态图形壁纸.我想知道如何在我的网站上实现这一目标?

这是一个真实的图表吗?还是只是动画图片?

谢谢！

解决方案

这是在 Chart.JS 中制作的精确图表，当您检查该元素时请注意它在 <canvas id="hero-bar">.然后，您可以通过在 JavaScript 中查找 id 为 hero-bar 的元素来了解该图表的工作原理.该条形图的代码恰好从源代码的第 108-161 行开始( http://www.chartjs.org/) 页面.

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

var data = [],条数 = 50，标签 = 新数组(barsCount)，updateDelayMax = 500,$id = 函数(id){返回 document.getElementById(id);},随机 = 函数(最大值){ 返回 Math.round(Math.random()*100)}，助手 = 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({标签:标签，数据集:[{填充颜​​色:'#2B303B',数据:数据}]},{显示比例:假，barShowStroke:假，barValueSpacing: 1,显示工具提示:假，onAnimationComplete : 函数(){//在更新期间获取英雄图的范围var heroChart = 这个，暂停;//每次触发更新时停止运行this.options.onAnimationComplete = 随机更新；this.options.animationEasing = 'easeOutQuint';随机更新()；函数随机更新(){heroChart.stop();清除超时(超时)；//获取随机柱超时 = setTimeout(函数(){var randomNumberOfBars = Math.floor(Math.random() * barCount),一世;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);
            };
        }
    });

相关文章