图表JS创建等效背景，如 chartjs.org

Question

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

导入图表

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

画布放置在

<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），但您似乎使用的是最新版本的库。

以下是与最新版本（2.7.1）的图表完美配合的更新语法.js

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

请参阅工作示例。