Chartjs отображают только последний в цикле (ionic)

Я использую Chartjs для рисования диаграмм в своем ионном приложении. Все работает нормально, за исключением того, что он отображает последний в цикле. Допустим, есть объекты [0,1,2], он отображает только 2, ну, используя ng-repeat, он повторяется 3 раза, так как в массиве 3 объекта. плохо прикрепляю мой взгляд и журнал консолей.

Консоль:

Есть 3 круговых объекта, в цикле отображается только последний

Просмотр приложения:

Как видите, это те же диаграммы

скрипт:

for(i in blogs.data) {
   if(blogs.data[i].post_type_id == 3) {

        var chartdraw = JSON.parse(blogs.data[i].chart.data);

        if(blogs.data[i].chart.chart_type_id == 1){
            $scope.pieData = chartdraw;
            $log.info('pieData:',$scope.pieData);
        }
        else if(blogs.data[i].chart.chart_type_id == 2){
            $scope.barData = chartdraw;
            $log.info('barData:',$scope.barData);
        }
        else if(blogs.data[i].chart.chart_type_id == 3){
            $scope.lineData = chartdraw;
            $log.info('lineData:',$scope.lineData);
        }
        else if(blogs.data[i].chart.chart_type_id == 4){
            $scope.numberData = chartdraw;
            $log.info('numberData:',$scope.numberData);
        }

   }
}

просмотр:

      <div class="card image" ng-if="blog.post_type_id == 3" >
         <a href="#/app/home/{{blog.id}}">
          <div class="thumb">
            <div>
              <canvas piechart options="chartOptions" data="pieData" width="150" height="150" ng-if="blog.chart.chart_type_id == 1">
              </canvas>
              <canvas barchart options="chartOptions" data="barData" width="150" height="150" ng-if="blog.chart.chart_type_id == 2">
              </canvas>
              <canvas linechart options="chartOptions" data="lineData" width="150" height="150" ng-if="blog.chart.chart_type_id == 3">
              </canvas>
              <div ng-if="blog.chart.chart_type_id == 4">
                <p ng-bind-html="numberData.details[0].value"></p>
                <p ng-bind-html="numberData.details[0].label"></p>
              </div>
            </div>
            <div class="text-center cat-icon">
              <span class="icon-wrapper">
                <i class="icon ion-stats-bars" style="position:relative;"></i>
              </span>
            </div>
          </div>

          <h4 class="title">{{blog.title}}</h4>
          <p class="details"><i class="icon ion-calendar"></i> {{blog.created_at}}</p>
         </a>
      </div>

javascript chart.js angularjs ionic
person kiempoturner    schedule 26.05.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Происходит следующее: диаграммы из каждого из ваших сообщений в блоге (все на картинке оказались круговыми) привязаны к одному из 3 объектов в зависимости от типа диаграммы (для изображения это $scope.pieData для всех графики)

Остальное зависит от того, как работает angular — не имеет значения, какое значение $scope.pieData было — когда вы обновляете $scope.pieData, angular обновляет все ссылки на $scope.pieData ( и, следовательно, графики также обновляются).

В вашем случае вы продолжаете обновлять его в цикле, и поэтому в конце цикла $scope.pieData — это то, что было в последнем сообщении, следовательно, все ваши диаграммы имеют эти данные. У вас должна быть одна переменная области действия для каждой диаграммы.

Вот ручка кода, иллюстрирующая, что происходит в вашем случае - http://codepen.io/anon/pen/doOqjN (я просто удалил chartjs, чтобы было понятнее) — обратите внимание, что все значения равны 3000.

А вот код с исправлением - http://codepen.io/anon/pen/MwbqBM. Обратите внимание, что теперь все значения разные. Единственные строки, которые я изменил, это

<div ng-if="blog.chart.chart_type_id == 1">{{blog.chart.data}}</div>
<div ng-if="blog.chart.chart_type_id == 2">{{blog.chart.data}}</div>
<div ng-if="blog.chart.chart_type_id == 3">{{blog.chart.data}}</div>

И вам на самом деле не нужен весь блок сценария!

Вероятно, вы могли бы оптимизировать немного больше, и я на самом деле ничего не делал с numberData.details, потому что я не был уверен, для чего это должно было быть.

person potatopeelings    schedule 27.05.2015
comment
Спасибо, чувак, за концепцию и codepen. Мне нужно на самом деле получить индекс для каждого объекта из API, следовательно, цикл. i будет неопределенным, если я уберу его из цикла. структура API такая, Objects [0,1,2,3,4,5,6,7] -> есть 4 типа сообщений, поэтому я должен сначала отсортировать, используя post.id.post_type_id , затем, если сообщение для диаграмм , мне нужно отсортировать его снова, так как есть 4 разных типа диаграмм, post.id.post_type_id.chart.chart_type_id. Мой скрипт просто не работает или плохо структурирован. - person kiempoturner; 28.05.2015
comment
Не могу это представить, но вы можете настроить параллельную структуру в области (т.е. один объект области для данных каждой диаграммы). - person potatopeelings; 28.05.2015