无法看到响应Angular NVD3图表与bootstrap

Not able to see responsive Angular NVD3 chart with bootstrap

本文关键字：bootstrap NVD3 Angular 响应      更新时间：2023-09-26

我使用了NVD3 (http://krispo.github.io/angular-nvd3/#/multiBarChart)库与bootstrap 3.0。我有两个div class="col-md-6 col-sm-12"彼此相邻对齐。我想在两个div中都显示图表。正确显示图表，我需要为angular-nvd3库设置高度和宽度选项。它在桌面版本上工作得很好。但是当我缩小窗口大小时，它会失去响应性。

同样，我不能在百分比中设置宽度选项;如果我这样做，它不显示图表。

// chart options
  $scope.options = {
    chart: {
      type: 'multiBarChart',
      height: 250,
      width: 600,
      staggerLabels: false,
      transitionDuration: 1000,
      tooltips: true,
      tooltipContent: function(key, x, y, e, graph) {
        return '<p>' + key + ': ' + y + '</p>';
      },
      stacked: false,
      showControls: false,
      xAxis: {
        showMaxMin: false,
        axisLabel: 'MockTests',
        axisLabelDistance: -30
      },
      yAxis: {
        axisLabel: 'Marks Comparison',
        axisLabelDistance: 40,
        ticks: 5,
        tickFormat: function(d) {
          return d3.format(',.f')(d);
        }
      }
    }
  };

请帮。

在标签的父元素上使用一个指令，在resize上，调整图表选项的宽度。我不确定这是否是最好的选择，但它帮助了我。

.directive('flexibleDiv', function () {
        return {
            scope: {
                opts: '=' 
            },
            link: function (scope, element, attr) {
                // Watching height of parent div
                scope.$watch(function () {
                    return element.parent(0).height();
                }, updateHeight);
                // Watching width of parent div
                scope.$watch(function () {
                    return element.parent(0).width();
                }, updateWidth);
                function updateHeight() {
                    scope.opts.chart.height = element.parent(0).height()-150; //150 custom padding
                }
                function updateWidth() {
                    scope.opts.chart.width = element.parent(0).width()-50; //50 custom padding
                }
            }
        }
    });
<div class="card-content" flexible-div opts='optionsRequest'>
     <span class="card-title black-text">Request</span>
     <nvd3 options='optionsRequest' data='dataRequest'></nvd3>
</div>

请参考

如果你没有在图表选项中设置任何宽度呢?从我在NVD3网站上看到的例子来看，宽度没有设置，所以基本上图表显示的宽度是其父元素的宽度。

相关文章：