Question

请参阅我在此尝试做的示例：http://www.chartjs.org/。我试图复制标题，一直有条形图移动。我试图让theres工作，但似乎没有工作。我可以看到他们有

<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中随机变化的英雄的工作版本

＆＃13;

SELECT P.COD_FRANCHISE, COUNT (I.COD_PRODUCT) AS 'QUANTITY'
FROM PRODUCT P
INNER JOIN ITEM I ON P.COD_PRODUCT = I.COD_PRODUCT
GROUP BY P.COD_FRANCHISE

＆＃13;

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

＆＃13;

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

＆＃13;

如何用帆布制作动画条形图？

1 个答案: