Question

我有一个场景，我需要在弹出模式中显示一个饼图（使用ui-bootstrap模态）。我使用c3.js作为我的饼图要求（在指令内）。

饼图未在弹出窗口内加载。但令我惊讶的是，当我打开控制台尝试调试问题时，它正在加载。当我重新调整窗口大小时，它正在加载。

我该如何解决这个问题？

'use strict';
angular.module('App')
    .directive('pieChartDirective', function() {
        return {
            restrict: 'A',
            scope: {
                chartdata: '=',
            },
            link: function(scope, elem, attrs) {
                var chart = c3.generate({
                    bindto: '#chart',
                    data: {
                        columns: [
                            ['Javascript', scope.chartdata.Javascript],
                            ['HTML', scope.chartdata.HTML],
                            ['Css', scope.chartdata.Css],
                            ['Angular', scope.chartdata.Angular],
                            ['Bootstrap', scope.chartdata.Bootstrap],
                            ['Jquery', scope.chartdata.Jquery],
                            ['Communication', scope.chartdata.Communication]
                        ],
                        type: 'pie',
                    },
                    legend: {
                        show: false
                    },
                    tooltip: {
                        format: {
                            value: function(value, ratio, id, index) {
                                return value;
                            }
                        }
                    }
                });
            }
        };
    });

HTML：

      <div pie-chart-directive chartdata="oChartData">
        <div id="chart"></div>
      </div>

Answer 1

你是否真的，你在html代码中正确地包含你的指令

<div pie-chart-directive></div>

也许您必须将限制更改为“E＆＃39;将您的指令用作标记元素

<pie-chart-directive chartdata="myData"></pie-chart-directive>

原因可能是，在您尝试生成图表时，您的'#chart' div尚未出现在dom树中。因此，您必须调整大小以触发新的绘制。尝试等到dom加载

$('#chart').ready(function() {
       var chart = c3.generate({
                bindto: '#chart',
                data: {
                    columns: [
                        ['Javascript', scope.chartdata.Javascript],
                        ['HTML', scope.chartdata.HTML],
                        ['Css', scope.chartdata.Css],
                        ['Angular', scope.chartdata.Angular],
                        ['Bootstrap', scope.chartdata.Bootstrap],
                        ['Jquery', scope.chartdata.Jquery],
                        ['Communication', scope.chartdata.Communication]
                    ],
                    type: 'pie',
                },
                legend: {
                    show: false
                },
                tooltip: {
                    format: {
                        value: function(value, ratio, id, index) {
                            return value;
                        }
                    }
                }
            });
});

Answer 2

我通过给出尺寸属性得到它：

            link: function(scope, elem, attrs) {
            var chart = c3.generate({
                bindto: '#chart',
                size: {
                    width:400,
                    height:350
                },
                data: {
                    columns: [
                        ['Javascript', scope.chartdata.Javascript],
                        ['HTML', scope.chartdata.HTML],
                        ['Css', scope.chartdata.Css],
                        ['Angular', scope.chartdata.Angular],
                        ['Bootstrap', scope.chartdata.Bootstrap],
                        ['Jquery', scope.chartdata.Jquery],
                        ['Communication', scope.chartdata.Communication]
                    ],
                    type: 'pie',
                },
                legend: {
                    show: false
                },
                tooltip: {
                    format: {
                        value: function(value, ratio, id, index) {
                            return value;
                        }
                    }
                }
              });
            }

指令的链接功能未被调用

2 个答案: