angular 指令中的 C3 图表调整大小

Question

我目前有一个用 C3 创建的简单圆环图。我把它放在一个指令中，一切正常。

我的指令如下：

angular.module('dashboardApp').directive('donutChart',function(){       

    function link(scope,element,attr){      


        scope.$watch(function() {

            return scope.data;
         },
            function() {                    
                if(scope.data !== undefined){                       

                    var chart  = c3.generate({
                        bindto: 'donut-chart',
                        data:{
                            columns : scope.data,                           
                            type: 'donut'
                            },
                        donut:{
                            label : {
                                format: function(value,ratio,id){
                                    return value;
                                },

                            }
                        },
                        tooltip:{
                                position: function(data,width,height,element){
                                    return {top:-180,left:300}
                                }
                            },                      
                    }); 
                }       
            }
        )};         

    return {
        restrict: 'EA',         
        scope: {
            data: '='       

        },
        link : link
    };
});

在 HTML 我有以下内容：

<div class="row">
    <div class="donut-route" >
        <donut-chart  data='routes'></donut-chart>
    </div>
</div>

我的目标是在 div 它当前所在的范围内重新调整甜甜圈字符的大小。

我知道 C3 调整大小，我可以在其中传递值，也许我可以将 window 大小添加到 $scope.watch 并调整它的大小每次，但我不确定那是否会太重。通过阅读文档，我认为 C3 图形会自动调整大小，但由于它在指令中，我认为它受到限制。

如有任何指点或建议，我们将不胜感激。

Answer 1

我将您的代码放入工作 Plunker 以调查问题。

因为生成的图表是一个 SVG 对象，CSS 自动调整它的大小的方法很棘手。但是我的建议是探索以下 post:

https://css-tricks.com/scale-svg/

或者 Whosebug

上的这个问题

所以我认为更有效的方法（如您所说）是在生成时使用大小选项：

   var chart = c3.generate({
        size: {
          height: 200,
          width: 200
        }...

和 C3 API 的调整大小方法来更新大小：

  chart.resize({height:100, width:300})

angular 指令中的 C3 图表调整大小

C3 Chart resize in angular directive

javascript

angularjs

c3.js