javascript - Chartjs 创建类似的背景，就像在 Chartjs.org 中一样

Question

我正在尝试创建类似于 www.chartjs.org 顶部的内容其中有一个随机移动的背景条形图。我发现了另一个类似的question ，但是它似乎不起作用。当我在下面添加时，它不会添加除 400x400 Canvas 以外的任何内容。我错过了什么？

导入chartjs

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

Canvas 放置在

<canvas id="hero-bar" width="400" height="400"></canvas>

脚本放置在底部

    <script>
      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

这不起作用，因为该示例使用的语法适用于 Chart.js 的旧版本(1.x)，但您似乎使用最新版本的库。

以下是更新后的语法，与最新版本的 Chart.js (2.7.1) 完美配合:

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'), {
   type: 'bar',
   data: {
      labels: labels,
      datasets: [{
         backgroundColor: '#2B303B',
         data: data
      }]
   },
   options: {
      legend: false,
      scales: {
         yAxes: [{
            display: false
         }]
      },
      tooltips: false,
      animation: {
         onComplete: function() {
            // Get scope of the hero chart during updates
            var heroChart = this,
               timeout;
            // Stop this running every time the update is fired
            this.options.animation.onComplete = randomUpdate;

            this.options.animation.eeasing = '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.data.datasets[0].data[Math.floor(Math.random() * barsCount)] = Math.round(Math.random() * 100);
                  };
                  heroChart.update();
               }, Math.random() * updateDelayMax * 2);
            };
         }
      }
   }
});

查看working example .