1

有时 svg 图表看起来比正常的要小。此问题已解决重新加载屏幕。

//Values Graphic
$scope.$watch(vm.dataGraphic.watch, function () {
    var data = vm.dataGraphic.watch ? $scope.$eval(vm.dataGraphic.watch) : vm.dataGraphic;

    setTimeout(sleep,500); //patch to "solve" this issue

    function sleep(){
        vm.dataValues = getDataValues(data);
    }

});
function getDataValues(data) {
    vm.dataGraphic = data || dataGraphicTest;
    if (vm.dataGraphic.values.length == 0) {
        return [];
    } else {
        vm.dataKeyValues = transformForKeyValues(vm.dataGraphic.values, vm.dataGraphic.accumulated);

        vm.barValues = transformBarValues(vm.dataGraphic.values, vm.dataGraphic.limit);
        var lineValues = transformLineValues(vm.barValues, vm.dataGraphic.limit, vm.dataGraphic.accumulated, vm.dataGraphic.startMonthlyLimit);
        vm.maxY = calculateMaxY(vm.barValues, lineValues);

        return [
            {
            "key": vm.dataGraphic.labelX.name,
            "bar": true,
            "color": _graphicsColors.bar,
            "values": vm.barValues
            },
            {
            "key": _graphicsValorPorDefecto,
            "color": _graphicsColors.line,
            "values": lineValues
            }
        ];
    }
}

带有以下 html 标记的 SVG 元素出现尺寸错误。

<g class="nvd3 nv-wrap nv-linePlusBar" transform="translate(35,10)">

这个问题并不总是发生，但当它发生时安排刷新屏幕。

我认为这个补丁是个坏主意，我想了解发生了什么。

谢谢

4

1 回答 1

2

我认为您的问题最终源于您的手表：

$scope.$watch(vm.dataGraphic.watch, function () {
    var data = vm.dataGraphic.watch ? $scope.$eval(vm.dataGraphic.watch) : vm.dataGraphic;

    setTimeout(sleep,500); //patch to "solve" this issue

    function sleep(){
        vm.dataValues = getDataValues(data);
    }

});

我看到的问题是您setTimeout在手表触发后半秒内调用睡眠功能。就像现在一样，如果您的 $digest 仍在 500 毫秒内运行，那就没问题了。setTimeout是一个普通的 JavaScript 函数，所以调用它不会通知 angularjs 在 $digest 结束后有任何变化。Angular 仅在“用户启动”事件（如 ajax、点击、输入数据等）之后触发 $digest（在此处阅读更多内容）。如果 $digest 正在运行，你会很幸运，而 angularjs 恰好会看到这些变化。您需要使用$scope.$apply通知 Angular 您的更改：

$scope.$watch(vm.dataGraphic.watch, function () {
    var data = vm.dataGraphic.watch ? $scope.$eval(vm.dataGraphic.watch) : vm.dataGraphic;

    setTimeout(sleep,500); //patch to "solve" this issue

    function sleep(){
        vm.dataValues = getDataValues(data);
        $scope.$apply();
    }

});

有很多使用方法$scope.$apply，所以一定要查看文档。还可以搜索“何时使用 $scope.$apply”之类的内容，您会发现很多人支持和反对它。它确实会触发另一个 $digest 循环，如果您有很多绑定，或者如果您处于最后一个摘要循环的末尾并应用导致它重新开始，这可能会很昂贵。

我认为setTimeout在手表功能中使用更新模型实际上不是一个好主意。没有它这行不通吗？您可能还有其他一些需要以相同方式应用的异步代码。通常，您希望$scope.$apply尽可能接近非角度异步代码。

于 2015-02-27T12:30:35.530 回答