如何使用動態數據創建AngularJS圖表

嗨即時嘗試有一個網頁，顯示政客的推文情緒。我正在爲情緒統計創建一個圖表。我正在使用Zingchart，我可以創建靜態數據，但我無法創建動態數據。如何使用動態數據創建AngularJS圖表

這是我用來插入靜態數據與數組chartdata的代碼。

<div class="row"> 
    <div class="col-sm-12"> 
     <div ng-init="chartdata = [[1167],[456],[990]]"> 
     <zingchart id="chart-1" zc-values="chartdata" zc-json="myJson" 
     zc-width="100%" zc-height="568px"></zingchart> 
     </div> 
    </div> 
    </div>

static pie chart

它工作正常，像這樣的，但我想從我的angularjs而不是靜態值使用的數據。例如：我試着做這樣的事情，但它不工作

<div class="row"> 
     <div class="col-sm-12"> 
     <div ng-init="chartdata =[[{{politicianData.stats.total_positive}}],[{{politicianData.stats.total_negative}}],[{{politicianData.stats.total_neutral}}]]"> 
      <zingchart id="chart-1" zc-values="chartdata" zc-json="myJson" zc-width="100%" zc-height="568px"></zingchart> 
     </div> 
     </div> 
    </div>

如何從角控制器得到的承諾陣列數據中的數據？

這是我的政客控制器：

angular.module('myapp') 
    .controller('PoliticianController', function($scope, PoliticianData, Politician, searchService, utilService) { 
var politicianData = new Politician(PoliticianData); 

     politicianData.$promise.then(function (result) { 

      $scope.politicianData = result; 
    }); 
$scope.myJson = { 
          globals: { 
          shadow: false, 
          fontFamily: "Verdana", 
          fontWeight: "100" 
             }, 
             type: "pie", 
             backgroundColor: "#fff", 

             legend: { 
              layout: "x5", 
              position: "50%", 
              borderColor: "transparent", 
              marker: { 
               borderRadius: 10, 
               borderColor: "transparent" 
              } 
             }, 
             tooltip: { 
              text: "%v requests" 
             }, 
             plot: { 
              refAngle: "-90", 
              borderWidth: "0px", 
              valueBox: { 
               placement: "in", 
               text: "%npv %", 
               fontSize: "15px", 
               textAlpha: 1, 
              } 
             }, 
             series: [{ 
              text: "Positive", 
              backgroundColor: "#FA6E6E", 
             }, { 
              text: "Negative", 
              backgroundColor: "#D2D6DE" 
             }, { 
              text: "Neutral", 
              backgroundColor: "#28C2D1" 
             }] 
            }; 

    });

這是politician.html頁

<span>{{politician.first_name}} {{politician.last_name}}</span> 
        </td> 
        <td>{{politicianData.stats.total}}</td> 
        <td>{{politicianData.stats.twitter.total}}</td> 
        <td>{{politicianData.stats.rss.total}}</td> 
        <td>{{politicianData.stats.total_negative}}</td> 
        <td>{{politicianData.stats.total_positive}}</td> 
        <td>{{politicianData.stats.total_neutral}}</td>

PoliticianData.stats.total_positive正確顯示計數我想要使用與我的圖表相同的數據作爲輸入值。我該怎麼做？

來源

2016-07-26 Sumitha

與工廠創建服務
呼叫數據
該服務僅使用zingchart指令
當範圍發生變化的數據，圖表就會被打開。

例子：

var myModule = angular.module('myModule', []); 

myModule.controller('myController', function($scope, chartService) { 
    $scope.chartdata = chartService.getDataWithService(); 
}); 

myModule.factory('chartService', function($http) { 
    return { 
    getDataWithService: function() { 
     var url = "yourServiceURL"; 
     return $http.get(url); 
    }, 
    getData: function() { 
     return { 
     type: 'line', 
     series: [{ 
      values: [54, 23, 34, 23, 43] 
     }, { 
      values: [10, 15, 16, 20, 40] 
     }] 
     }; 
    } 
    }; 
});

HTML：

<zingchart id="chart-1" zc-values="chartdata" zc-json="myJson" zc-width="100%" zc-height="568px"></zingchart>

來源

2016-07-26 12:19:46 hurricane

您好感謝您的答覆...但我已經從打開的數據庫有我的數據。看到上面的編輯..也許它會幫助你更好地理解我的問題。 – Sumitha

充分披露，我是ZingChart團隊的一員。

您正在尋找的確切功能是數據綁定。我們在我們的angularjs-charts頁面上有關於圖表的數據綁定元素的文檔。

在你的情況下，有幾個步驟需要達到你想要的。我的第一個建議是在ng-init視圖中取出不必要的控制器邏輯並將其保存在指令中。只是一個建議，沒有必要。爲了這個答案，我的格式將大部分內容保存在控制器中。

HTML：

<body ng-app="myApp"> 
    <div ng-controller="MainController"> 
    <div zingchart id="chart-1" zc-json="myJson" zc-width="100%" zc-height="568px" zc-values="aValues"></div> 
    </div> 
</body>

應用邏輯：

var app = angular.module('myApp',['zingchart-angularjs']); 

app.controller('MainController', function($scope, $timeout) { 

// mimick your promise 
(function(){ 
    $scope.data = {}; 
    $scope.data.valuesOne = [1,2,3,4,5]; 
    $scope.data.valuesTwo = [1,2,3,4,5]; 
    $scope.aValues = [$scope.data.valuesOne,$scope.data.valuesTwo]; 
})(); 

$scope.myJson = { 
    type : "bar", 
    title:{ 
    backgroundColor : "transparent", 
    fontColor :"black", 
    text : "Hello world" 
    }, 
    backgroundColor : "white", 
    series : [ 
    { 
     backgroundColor : '#00baf2' 
    }, 
    { 
     backgroundColor : '#4caf4f' 
    } 
    ] 
}; 

// automatically wraps code in $apply 
$timeout(function(){ 

    // wont reflect changes in aValues because its an object 
    $scope.data.valuesOne = [5]; 

    // must force the reflection of the changes 
    $scope.aValues = [$scope.data.valuesOne, $scope.data.valuesTwo]; 

    // will reflect changes with one line, not the above two lines 
    //$scope.aValues[0] = [5]; 

},1500); 

});

你可以看到，我已經設置了$超時，以反映1.5秒後圖形的變化。這個$超時是模仿數據庫更新中的某種對象更改。有兩種方法可以更新這些值，但要了解爲什麼我們必須先了解更多關於ZingChart Angular指令的信息。

您必須使用HTML zc-values並不僅僅是zc-json因爲code對zc-values深刻的平等手錶使用$watchCollection()。「$ watchCollection（）函數是上述兩個$ watch（）配置之間的一種中間排序，它比vanilla $ watch（）函數更深入;但它並不像昂貴（）函數一樣，$ watchCollection（）函數通過比較物理對象引用來工作;但是，與$ watch（）函數不同，$ watchCollection（）變爲一個級別深入並對集合中的頂級項目執行額外的淺層引用檢查。「 - referenced here.

這就是爲什麼它只會在我的示例中更改aValues數組中的引用。

您可以看到，在$超時內有兩種方法來更新圖表的值。因爲你有一個數組數組，所以對內部數組的更改不會被反射，因爲它們是深度對象屬性。您可以看到更新單個數組必須強制分配回父級以反映更改。父母直接更改將更新參考，並將反映一行中的更改。

Codepen演示here.

更加棱角/ ZingChart鏈接

來源

2016-07-26 18:20:09 nardecky

我遇到了這個鏈接，目前我正在處理同樣的要求。請查看http://codepen.io/anon/pen/BWGEYG示例。我想先顯示數據$ scope.data.valuesOne = [10,20,30,40,5]的第一個堆棧欄，第二個堆積欄應該表示數據$ scope.data.valuesTwo = [12,12,30,10 ，5]。我通過很多鏈接找到解決方案，但我認爲它不是那麼簡單。請諮詢。 – DIM

不幸的是，你看到輸入的方式是我們如何接近我們的堆積酒吧。這非常簡單。第一個系列（data.valuesOne）是堆棧中的第一行。第二個系列（data.valuesTwo）是每個堆棧中的第二行。您只需將數據轉換爲該格式。 – nardecky

如果您還有其他問題，請打開一個新問題。 $ scope.data.valuesOne = [10,12]; $ scope.data.valuesTwo = [20,12]; $ scope.data.valuesThree = [30，30]; $ scope.data.valuesFour = [40，10]; $ scope.data.valuesOne，$ scope.data.valuesThree，$ scope.data.valuesFour，$ scope .data.valuesFive]; – nardecky

如何使用動態數據創建AngularJS圖表

回答

相關問題