角度材质渲染c3图表

Question

我在显示角度材质元素和C3.js图表​​时遇到了一些问题。

随着角度材料的新版本，在小部件出现滚动条。 有谁知道如何禁用它？我想要显示其固定大小的小工具。 请看看plunker。

第二个问题与C3图相关。 我在浏览器中打开应用程序（也是这种情况），然后打开图表显示的对话框。然后关闭对话框并再次打开，图表被打破。

什么可能是这个问题的原因？我在我的项目中使用了很多库（ngAnimate，ngAria，ngCookies，ngResource，ngTouch，ui.router，ngMaterial，ngMdIcons，ui.grid，ui.grid.selection，ui.grid.cellNav，ui.grid.pagination， ui.grid.resizeColumns，leaflet-directive，bootstrap，jQuery，c3，d3）。我需要注意他们的订单吗？

这里是C3图表，控制器（数据来自外部源 - DB）：

angular.module('app') 
.controller('ChartCtrl', ['$scope', '$stateParams', 
    function ($scope, $stateParams) { 

    $scope.param = $stateParams.param_1; 

    d3.json('/chart1/'+$stateParams.param_1, function(err, data){ 
     if(err){ throw err; } 
     $scope.data = data; 
     //console.log(data); 
     $scope.$apply(); 

     $scope.chart = c3.generate({ 
      bindto: '#chart1', 
      /*size: { 
       height: 350 
      },*/ 
      data: { 
       json: $scope.data, 
       //columns: $scope.data, 
       keys: { 
        value: ['data1', 'data2'], 
       }, 
       type: 'bar' 
      }, 
      bar: { 
       width: { 
        ratio: 0.4 // this makes bar width 50% of length between ticks 
       } 
      }, 
      grid: { 
       x: { 
        show: true 
       }, 
       y: { 
        show: true 
       } 
      } 
     }); 
    }); 
}]); 

而且它包括在面板的小部件的指令的HTML模板：

<div id="chart1" ng-controller="ChartCtrl"> 
    <div id="chart1"></div> 
</div> 

Answer 1

你可以做这样的事情到修复显示在标签1中的图形的大小。

在边Tab1中，制作一个固定大小的SVG和高度象下面这样：

<div id="tab1" ng-controller="GraphCtrl"> 
    <svg id="chart1" width="100" height="100"></svg> 
</div> 

绑定到SVG图形是这样的：

$scope.chart_grid_lines = c3.generate({ 
    bindto: d3.select('#chart1'), //binding to svg 
    data: { 
     columns: [ 
     ['data1', 30, 200, 100, 400, 150, 250], 
     ['data2', 50, 20, 10, 40, 15, 25] 
     ], 
     type: 'spline' 
    }, 
    legend: { 
     show: false 
    } 
    }); 

工作代码here

希望这有助于！