javascript - 延迟加载的 ui-jq 流程图

Question

我有以下 html:

    <div id="test" ui-jq="plot" ui-options="
      [
        { data: {{line}}, points: { show: true, radius: 6}, splines: { show: true, tension: 0.45, lineWidth: 5, fill: 0 }, label: 'Akademi' },
      ],
      {
        colors: ['{{app.color.info}}', '{{app.color.success}}'],
        series: { shadowSize: 3 },
        xaxis:{
          font: { color: '#ccc' },
          position: 'bottom',
                  ticks: {{categories}}
        },
        yaxis:{ font: { color: '#ccc' } },
        grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },
        tooltip: true,
        tooltipOpts: { content: '%x.1 is %y.4',  defaultTheme: false, shifts: { x: 0, y: 20 } },
        redrawOverlayInterval: 60
      }
" style="height:240px">
</div>

此图表的数据正在由 $http get 请求加载:

    $http.get(api.getUrl('latestActivityByTeamAndModule', [$scope.team_id, $scope.module_id]))
    .success(function(response){
        var i = 0;
        $scope.line = [];
        $scope.categories = [];
        response.forEach(function(y){
            var log_date = y.date.substr(0, y.date.indexOf('T'));
            var date = new Date(log_date);
            var logg_date = moment(date).fromNow();
            $scope.categories.push(logg_date);
            $scope.line.push(y.num_taken);
        });
    });

遗憾的是，当我强制重新加载(F5)时，图表是空的。但是 html 已正确更新:

通过检查 chrome 中的元素:

<div id="test" ui-jq="plot" ui-options="[
                            { data: [4], points: { show: true, radius: 6}, splines: { show: true, tension: 0.45, lineWidth: 5, fill: 0 }, label: 'Akademi' },
                          ],
                          {
                            colors: ['#23b7e5', '#27c24c'],
                            series: { shadowSize: 3 },
                            xaxis:{
                              font: { color: '#ccc' },
                              position: 'bottom',
                                      ticks: [&quot;21 hours ago&quot;]
                            },
                            yaxis:{ font: { color: '#ccc' } },
                            grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },
                            tooltip: true,
                            tooltipOpts: { content: '%x.1 is %y.4',  defaultTheme: false, shifts: { x: 0, y: 20 } },
                            redrawOverlayInterval: 60
                          }" style="height: 240px; padding: 0px; position: relative;">

我猜是因为延迟加载，所以它不会在数据更改时重绘？

Answer 1

尝试添加ui-refresh

<div id="test" ui-jq="plot" ui-refresh="line" ui-options="[{ data: {{line}}, ... }, ... ]"></div>

其中 ui-refresh 值是 ui-options data 值名称的文字名称。