Angularjs：爲圖表求和的數組元素

使用tc-angular-chartjs我能夠得到餅圖的功能，但一直未能弄清楚如何總結標籤值以正確顯示。另外，我可以使用他們的示例獲取條形圖，但不能通過ajax調用與外部數據配合使用。Angularjs：爲圖表求和的數組元素

注意：我對angularjs和javascript都很陌生，所以我可能在這裏錯過了一些簡單的東西，但我一直在試圖找出沒有運氣的日子。

餅圖例如： 我正在使用工廠和restangular來獲取外部數據，並工作。

問題＃1

要計算我已經試過幾次提到我已經找到了元素值，但沒有運氣試圖納入圖表。這是我試過的參考文獻之一。他們大多是我見過的這個變化：occurrence of array elements

海圖代碼片段：

services.forEach(function(service) { 
data.push({ 
     'value': incident.service.name.length, // Need to calculate sum of each 'label: service' element. [Used .length to get test value] 
     'color': colors.getRandom(), // This works, but need colors to be same for ea. service name 
     'highlight': 'brown', 
     'label': incident.service.name 
    }); 
$scope.data = data; 
//console.log($scope.data); 
    });

數據輸出例：

Array[65] 
     0: Object 
      color: "orange" 
      highlight: "brown" 
      label: "Service1" 
      value: 36 
      __proto__: Object 
     1: Object 
      color: "navy" 
      highlight: "brown" 
      label: "Service1" 
      value: 40 
      __proto__: Object 
     2: Object 
      color: "green" 
      highlight: "brown" 
      label: "Service2" 
      value: 40 
     3: Object 
      color: "blue" 
      highlight: "brown" 
      label: "Service3" 
      value: 20 
     etc ..

HTML：

<div class="chart" ng-controller="chartController" style="margin-top:20px;"> 
      <canvas tc-chartjs-pie chart-options="options" chart-data="data" auto-legend></canvas> 
    </div>

條形圖只能在其網站上使用示例。

問題＃2 - 下面我將我得到調查這一個進一步

嘗試：類型錯誤：無法讀取未定義

代碼片斷的特性 '長度'：

// Chart.js數據

services.forEach(function(service) { 
     data.push({ 
      label: incident.service.name, 
      fillColor: 'rgba(220,220,220,0.5)', 
      strokeColor: 'rgba(220,220,220,0.8)', 
      highlightFill: 'rgba(220,220,220,0.75)', 
      highlightStroke: 'rgba(220,220,220,1)', 
      data: incident.service.name.length 
     }); 
$scope.data = data; 
    //console.log($scope.data); 
});

來源

2015-07-03 georgeb1

「事件」從哪裏來？ 'service'已經被傳遞到每個'services'迭代的函數中。難道它不是'service.name.length'嗎？ – daleyjem

條形圖長度誤差具有誤導性。無論我使用.length還是硬編碼，它都會發生。此外，我的主要問題是總結價值領域的元素，所以現在可能忽略條形圖問題。我會審查一次，我可以至少得到餅圖功能準確。 – georgeb1

使用Chrome開發工具，並在您的JS中放置斷點以查看等同於什麼。如果你是JS的新手，它會開闢一個全新的世界，以便看到事情出錯的地方。 – daleyjem

如果我理解什麼你正在試圖做的，這是你需要做的，而不是：

incident[service].name.length

但我可能誤解了你的問題。如果是的話，讓我知道。

來源

2015-07-03 20:56:00 Chrillewoodz

如果你指的是條形圖問題。我得到同樣的「TypeError：即使我將數據：incident.service.name.length替換爲數據：28或任何其他隨機數，也無法讀取未定義的屬性」長度「。 – georgeb1

@ georgeb1如果您使用設定值，您怎麼能得到'未定義的長度'錯誤？或者如果你做了其他事情呢？ – Chrillewoodz

在開始處理之前，您可能還沒有數據。所以，如果您使用ajax進行檢索，請確保在開始forEach循環之前數據已存在。

來源

2015-07-03 20:59:12

我正在使用restangular調用獲取數據，並且工作正常。數據輸出示例就是我正在使用的。我只是將標籤數據的名稱更改爲通用service1,2等。在該示例中，有2個service1標籤，所以service1的值應爲2.我需要計算每個標籤的總和並將值放入值域。這是我的第一個問題。條形圖是第二個問題。也許我應該留下條形圖問題了。 – georgeb1

你可以看到未定義的長度來自哪裏，哪個屬性？這將會有所幫助。 –

我試圖添加鉻的錯誤屏幕截圖，但沒有足夠的點來發布圖像。錯誤不告訴我在哪裏 - 他們都參考chart.js和angularjs – georgeb1

我沒有足夠的代表處添加評論，所以我把它放在一個答案

什麼是變量incident的價值？它來自異步服務，是硬編碼還是來自同步計算？

我會在循環之前打印出incident的值，以便您能夠了解循環之前的內容。

另外，forEach裏面有什麼service的結構？你有沒有可能在循環中使用它作爲incident[service].name？

來源

2015-07-03 21:07:27 JesseDahl

「事件」來自使用restangular的工廠調用的初始結果。我一直在試圖限制數據範圍，以便更容易排除故障。上面的「數據輸出示例」基本上就是我現在正在處理的內容。 – georgeb1

Angularjs：爲圖表求和的數組元素

回答

相關問題