无法使用引导程序查看响应式 Angular NVD3 图表

Question

我在 bootstrap 3.0 中使用了 NVD3 (http://krispo.github.io/angular-nvd3/#/multiBarChart) 库。 我有两个 class="col-md-6 col-sm-12" 的 div 彼此相邻对齐。 我想在两个 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);
        }
      }
    }
  };

请帮忙。

Answer 1

在标签的父级上使用指令并在调整大小时调整图表选项宽度。我不确定这是否是最佳选择，但它帮助了我。

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

Please refer this

Answer 2

如果您没有在图表选项中设置任何宽度怎么办？从我在 NVD3 网站上的示例中看到的，宽度没有设置，所以基本上图表显示为其父元素的宽度。