Angular Material 渲染 c3 图表

Question

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

随着新版本的角材质，在小部件中出现了滚动条。 有人知道如何禁用它吗？我想显示固定大小的小部件。 请看plunker。

第二个问题与 C3 图有关。 在我在浏览器中打开应用程序（在 plunker 也是如此）并打开图表显示的对话框后。然后我关闭对话框并再次打开，图表已损坏。

这个问题的原因可能是什么？我在我的项目中使用了很多库（ngAnimate、ngAria、ngCookies、ngResource、ngTouch、ui.router、ngMaterial、ngMdIcons、ui.grid、ui.grid.selection、ui.grid.cellNav、ui.grid.pagination、 ui.grid.resizeColumns、传单指令、引导程序、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
                }
            }
        });
    });
}]);

以及包含在 panel-widget 指令中的 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

希望这会有所帮助！