Question

我正在使用D3图表在屏幕上显示数据。数据从WebApi更新。数据更新后，我想刷新图表中的数据。

这是代码

 $scope.config = {
        title: 'Products',
        tooltips: true,
        labels: false,
        mouseover: function () { },
        mouseout: function () { },
        click: function () { },
        legend: {
            display: true,
            //could be 'left, right'
            position: 'right'
        }
    };


$http.put(WebApiURL.GetWebApiURL() + 'api/ReportPerformance', data)
     .then(function (response) {
         $scope.PerformanceData = response.data;
         $scope.LoadingData = "";
         $scope.chartdata = [];
         var tempchartdata = [];
         angular.forEach($scope.PerformanceData, function (value) {
             tempchartdata.push(value.ReportTimeInSeconds);
         });
         $scope.chartdata = tempchartdata;
     }), function errorCallback(x, y, z) {
         $scope.LoadingData = "Error while generating report:= " + x.ExceptionMessage;
     };
    }

此网络电话更新数据$scope.chartdata。

html中的图表定义......

<div data-ac-chart="'bar'"
     data-ac-data="chartdata"
     data-ac-config="chartConfig"
     style="height: 500px; width: 500px;"
     class="chart">
</div>

但是当数据来自webApi时，它正在更新$scope.chartdata，但它没有反映在屏幕上。

添加了plunker ... http://plnkr.co/edit/a0mVRL0Jo9ah8Om8ONTc

Answer 1

您应该在指令中观看$scope.dataAcData并更新

中的D3

scope.$watch('dataAcData',function(){
  //update your d3 here
})

Answer 2

尝试应用方法，我现在更新了因为，$ digest在你的代码中不起作用。包裹你的代码

@Entity
@Data
public class Abc {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;

    @OneToOne(fetch = FetchType.EAGER)
    @JoinColumn(name = "user_id")
    private User user;

    private String hashKey;

    private String email;

    @Temporal(TemporalType.TIMESTAMP)
    private Date createdAt;

    @PrePersist
    public void onCreate() {
        this.createdAt = new Date();
    }

}

如何在更新数据时更新D3图表

2 个答案: