Question

我正在使用Morris图，我面临的问题是图表没有显示，只有在调整窗口大小时才显示，例如放大或缩小。

代码如下：

Html页面

     <div class="content" ng-controller="SuperUserController">

      <LineChart xkey="xkey" ykeys="ykeys" labels="labels"  ng-show="lineChart"  ></LineChart>
    <i class="fa fa-area-chart" ng-click="graphSet(1)"></i>

 </div

Angular js文件

myapp.controller('SuperUserController',function(dataFactory,Flash,$scope,$http){
    $scope.graph=true;
    $scope.lineChart = false;

    $scope.xkey = 'xAxis';
    $scope.ykeys = ['yAxis'];
    $scope.labels = ['unit'];
    $scope.myModel = [];

    $scope.graphSet=function($id) {
        $scope.deviceId=$id;
        dataFactory.httpRequest('/graph/yesterday/' + $id).then(function (data) {
            if (Object.keys(data).length !== 0) {
                $scope.graph = true;
                $scope.lineChart = true;

                $scope.myModel = data;
        }

    });

    }
myapp.directive('linechart',function(){ //directive name must be in small letters

    return {
        // required to make it work as an element
        restrict: 'E',
        template: '<div></div>',
        replace: true,
        link:function($scope,element,attrs)
        {

            var data = $scope[attrs.data],
                xkey = $scope[attrs.xkey],
                ykeys = $scope[attrs.ykeys],
                labels = $scope[attrs.labels];
            $scope.$watch("myModel", function (newValue) {
                data = newValue;
                console.log(newValue);

                Linechart.setData(newValue);

            });
            config = {
                element: element,//element means id #
                data: data,
                xkey: xkey,
                ykeys: ykeys,

                labels: labels,
                parseTime: false,
                pointFillColors: ['#D58665'],
                lineColors: ['#0b62a4'],
                smooth: true,
                hideHover: 'auto',
                pointSize: 4,
                axes: true,
                resize: true,
                fillOpacity: 1.0,
                grid: true,

            }


                Linechart = Morris.Line(config);



        }
    }


})

单击图标时会显示LineChart元素，但不显示图形。仅在调整窗口大小时显示。

Answer 1

我有同样的问题

使用ng-if =“lineChart”代替ng-show =“lineChart”

莫里斯图不显示，仅在调整窗口大小时显示

1 个答案: