angularjs 仅在调整窗口大小时才显示Morris图

cotxawn7  于 2022-10-31  发布在  Angular
关注(0)|答案(2)|浏览(177)

我正在使用莫里斯图,我面临的问题是,该图没有显示,它只显示当我调整窗口大小,如放大或缩小。
代码如下:
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

角形js文件

$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);

            }
        }

    })

当我按一下缐条图图标时,会显示元素,但不会显示图形。只有在调整视窗大小时才会显示图形。

xqnpmsa8

xqnpmsa81#

我也有同样的问题
请使用ng-if=“线条图表”而不是ng-show=“线条图表”

deyfvvtc

deyfvvtc2#

我这样做,它的工作。

let bar = Morris.Bar({...});
setTimeout(function () {
    let element_svg = document.querySelector("#id svg");
    element_svg.style.setProperty("width", "100%");
    bar.redraw();
}, 200);

使用setTimeout确保SVG已呈现

相关问题