Angular Material 渲染c3图表

Question

我在显示 angular material 元素和 C3.js 图表时遇到了一些问题。

随着新版本的angular material，小部件中出现了滚动条。有人知道如何禁用它吗？我想显示固定大小的小部件。请看一下 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，传单指令，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
                }
            }
        });
    });
}]);

以及包含在 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

希望对您有所帮助！

Angular Material 渲染c3图表

Angular Material rendering c3 charts

json

angularjs

d3.js

angular-material

c3.js