惰性加载的ui-jq flot图表 [英] ui-jq flot chart on lazy load

问题描述

我有以下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请求加载的:

The data for this chart is being loaded by a $http get request:

    $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是否已正确更新:

Sadly when i force reload (F5) the chart is empty. HOWEVER the html is correctly updated:

通过检查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;">

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

im guessing its because of the lazy load so that it does not redraw on the data change?

推荐答案

尝试添加用户界面刷新

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

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

Where ui-refresh value is the literal name of ui-options data value name.

这篇关于惰性加载的ui-jq flot图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！