Echo-Leiste wird nicht mit JSON

Question

Ich bin neu und brauche deine Hilfe mit diesem. Ich möchte Basic Bar inverted Achsen mit Json Daten zu bauen. Es sollte so aussehen: Bar Inverted Axes , aber irgendwie wird das Diagramm nicht angezeigt. Ich verwende Winkel die Web-Anwendungen zu bauen, das ist mein Controller

.controller("JsonCtrl", function ($scope, $http,$location, chartBar) { 
 
     
 
     $scope.data1 = {}; 
 

 
     $http.get('data/set.json') 
 
      .success(function (data1) { 
 
       var axis1 = [],seriesa = [],seriesb = [], seriesc = [], seriesd = [], seriese = [] ; 
 
        data1.forEach(function(row) { 
 
        axis1.push(row.data1); 
 
        seriesa.push(row.data2); 
 
        seriesb.push(row.data3); 
 
        seriesc.push(row.data4); 
 
        seriesd.push(row.data5); 
 
        seriese.push(row.data6); 
 
        
 
        }); 
 
    
 
       $scope.data1.a=axis1; 
 
       $scope.data1.b=seriesa; 
 
       $scope.data1.c=seriesb; 
 
       $scope.data1.d=seriesc; 
 
       $scope.data1.e=seriesd; 
 
       $scope.data1.f=seriese; 
 
       
 

 
       /**/ 
 
       console.log($scope.data1); 
 

 
       
 
       var c = chartBar('mainb',$scope.data1); 
 
           //windows responsive 
 
       window.onresize=function() 
 
       { 
 
        c.resize() 
 
        
 
       } 
 
       // 
 
      }) 
 
      .error(function (error) { 
 
       $scope.data.error = error; 
 
      }); 
 

 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="col-xs-12 col-sm-12 widget-container-col"> 
 
       <div class="widget-box"> 
 
        <div class="widget-header"> 
 
         <h5 class="widget-title">Barca (Bar Chart)</h5> 
 
         <div class="widget-toolbar"> 
 
          <a href="#" data-action="fullscreen" class="orange2"> 
 
           <i class="ace-icon fa fa-expand"></i> 
 
          </a> 
 

 
          <a href="#" data-action="collapse"> 
 
           <i class="ace-icon fa fa-chevron-up"></i> 
 
          </a> 
 
         </div> 
 
        </div> 
 

 
        <div class="widget-body"> 
 
         <div class="widget-main"> 
 
          <div id="mainb" style="height:250px;"></div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>

Hier json Daten:

{ 
 
    "data1": ["Smtra", "Jawa", "Klmtn", "Sulwsi", "Maluku"] 
 
    "data2": [149739, 244347, 54462, 59869, 6713], 
 
    "data3": [150089, 223519, 49523, 58881, 6152], 
 
    "data4": [141625, 200745, 46966, 54637, 6733], 
 
    "data5": [120428, 173979, 42208, 45067, 6034], 
 
    "data6": [114254, 164168, 39415, 38750, 5301] 
 
}

Und das ist die Fabrik um das Diagramm zu erstellen:

.factory('chartBar',function(echartTheme){ 
 
     return function(element, data1){ 
 
      var echartBar = echarts.init(document.getElementById(element), echartTheme); 
 

 
      echartBar.setOption({ 
 
       title: { 
 
        text: 'Bar Graph', 
 
        subtext: 'Bar' 
 
       }, 
 
       tooltip: { 
 
        trigger: 'axis' 
 
       }, 
 
       legend: { 
 
        x: 100, 
 
        data: ['2010', '2011', '2012', '2013', '2014'] 
 
       }, 
 
       toolbox: { 
 
        show: true, 
 
        feature: { 
 
         saveAsImage: { 
 
          show: true, 
 
          title: "Save Image" 
 
         } 
 
        } 
 
       }, 
 
       calculable: true, 
 
       xAxis: [{ 
 
        type: 'value', 
 
        boundaryGap: [0, 0.01] 
 
       }], 
 
       yAxis: [{ 
 
        type: 'category', 
 
        data: data1.a 
 
       }], 
 
       series: [{ 
 
        name: '2010', 
 
        type: 'bar', 
 
        data: data1.b 
 
       }, { 
 
        name: '2011', 
 
        type: 'bar', 
 
        data: data1.c 
 
       }, { 
 
        name: '2012', 
 
        type: 'bar', 
 
        data: data1.d 
 
       }, { 
 
        name: '2013', 
 
        type: 'bar', 
 
        data: data1.e 
 
       }, { 
 
        name: '2014', 
 
        type: 'bar', 
 
        data: data1.f 
 
       }] 
 
      }); 
 
     } 
 
    })

Ich wünsche Sie mir helfen können :)

Answer 1

ECharts wird nicht aktualisiert, bis Sie echartBar.setOption nennen.

Sie müssen wahrscheinlich so etwas wie

echartBar.setOption({ 
    series: [{ 
     data: $scope.data1 
    }] 
});