Question

我制作了一个简单的条形图插件，它采用了一些设置和数据并以百分比形式显示，它在除IE9-10之外的所有浏览器中都能正常工作。

图表仍然很好但有一个奇怪的跳跃＆＃39;一旦每个酒吧完成动画，桌子似乎获得额外的高度。我已经在浏览器中测量了图表中条形图的高度，它可以正常工作，并且在浏览器中添加了大约50px的高度，其中奇怪的跳跃＆＃39;效果发生。

以下是相关的CSS：

#barchart {
  text-align: center;
}

.bar {
  margin-right: 10px;
  position: relative;
  bottom: 0;
  overflow: hidden;
  padding-top: 50px;
  height: 100%;
}

.bar .label {
  text-align: center;
  width: inherit;
  margin: 0 auto 20px auto;
  width: 116px;
}

.bar__value {
  height: 0%;
  background-repeat: repeat-y;
  background-position: top center;
  margin: 0 5px;
}

这是JS：

var Crafted = (function(c) {
  return c;
})(Crafted || {});

(function($, c) {

  c.BarChart = (function() {

    var barChart = function(target, options, data) {
      this.target = target;
      this.ChartItem(options);
      this.data = data;
      this.create();
    };

    barChart.prototype.ChartItem = function(options) {
      var settings = $.extend({
        width: '100%',
        height: '500px',
        usePercentSymbol: false,
        delay: 1000,
        animSpeed: 1000,
        chartImage: '',
        chartBgColour: '#CCCCCC'
      }, options);

      this.width = settings.width;
      this.height = settings.height;
      this.usePercentSymbol = settings.usePercentSymbol;
      this.delay = settings.delay;
      this.animSpeed = settings.animSpeed;
      this.chartImage = settings.chartImage;
      this.chartBgColour = settings.chartBgColour;
      return this;
    };

    barChart.prototype.create = function() {

      var _self = this;

      if (!_self.target) {
        console.error('Error: BarChart \'target\' must be specified');
        return;
      }

      if (!_self.data) {
        console.error('Error: BarChart \'data\' must be provided');
        return;
      }

      var $barChart = $('<table></table>').attr('id', 'barchart');
      var $charts = $('<tr></tr>').addClass('data-row');

      $charts.appendTo($barChart);
      $barChart.appendTo(_self.target);
      $barChart.attr('width', _self.width)
        .attr('height', _self.height);

      $.each(_self.data, function(index, value) {
        var $chart = $('<td></td>')
          .addClass('bar')
          .attr('valign', 'bottom')
          .attr('data-percent', value.percent);
        $chart.appendTo($charts);

        var $chartLabel = $('<div></div>').addClass('label');
        $chartLabel.appendTo($chart);

        var $chartValue = $('<div></div>').addClass('label__percent').text(_self.usePercentSymbol ? '0%' : 0);
        $chartValue.appendTo($chartLabel);

        var $chartTitle = $('<div></div>').addClass('label__title').text(value.label);
        $chartTitle.appendTo($chartLabel);

        var $barValue = $('<div></div>').addClass('bar__value');

        var barStyle = _self.chartImage ?
          'background-image:url(\'' + _self.chartImage + '\');' :
          'background-color:' + _self.chartBgColour

        $barValue.attr('style', barStyle);
        $barValue.appendTo($chart);
      });

      setTimeout(function() {
        $('.bar').each(function() {
          var percentage = $(this).attr('data-percent');
          var $percentLbl = $(this).find('.label__percent');

          $(this).children('.bar__value').animate({
            height: percentage + '%'
          }, _self.animSpeed);

          $({
            countNum: 0
          }).animate({
            countNum: percentage
          }, {
            duration: _self.animSpeed,
            easing: 'linear',
            progress: function() {
              var currentValue = Math.floor(this.countNum);
              $percentLbl.text(_self.usePercentSymbol ? currentValue + '%' : currentValue);
            }
          });
        });
      }, _self.delay);
    };

    return barChart;
  })();

})(jQuery, Crafted);

$(function() {
  (function(c) {
    var settings = {
      width: '800px',
      height: '400px',
      usePercentSymbol: true,
      delay: 200,
      animSpeed: 1000,
      chartImage: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/662693/chimney.svg'
    };

    var data = [{
      label: 'MANCHESTER',
      percent: 78
    }, {
      label: 'BIRMINGHAM',
      percent: 69
    }, {
      label: 'LONDON',
      percent: 94
    }, {
      label: 'CARDIFF',
      percent: 39
    }, {
      label: 'GLASGOW',
      percent: 54
    }, {
      label: 'BELFAST',
      percent: 35
    }]

    var barChart = new c.BarChart('#barChart', settings, data);

  })(Crafted);
});

我有JsFiddle来证明这个问题。如果你在IE9 / 10中加载它（你可以在IE开发工具 - F12中使用浏览器模拟器），你会看到我正在谈论的奇怪效果。这不会发生在IE11 / Edge等......

是否应该将填充顶部应用于<td>元素？这用于为每个图表标签提供足够的间距，以防止它们被切断。

Answer 1

尝试将此css修改为bar class

.bar {
 margin-right: 10px;
 position: relative;  
 bottom: 0;
 overflow: hidden;
 padding-top: 50px;
 height: 75%;

}

似乎它适用于ie9 / 10和chrome

条形图插件 - IE9-110问题与图表扩展到容器外

1 个答案: