गतिशील डेटा

Question

के साथ कोणीय जेएस चार्ट कैसे बनाएं हाय मैं एक वेबपृष्ठ रखने की कोशिश कर रहा हूं जो राजनेताओं की ट्वीट्स की भावनाओं को प्रदर्शित करता है। मैं भावना आंकड़ों के लिए एक चार्ट बनाने की कोशिश कर रहा हूं। मैं ज़िंगचर्ट का उपयोग कर रहा हूं और मैं स्थिर डेटा बनाने में सक्षम हूं लेकिन मैं गतिशील डेटा बनाने में सक्षम नहीं हूं।

यह वह कोड है जिसे मैं सरणी चार्टटाटा के साथ स्थिर डेटा डालने के लिए उपयोग करता था।

<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 गणना सही तरीके से प्रदर्शित करता है और मैं अपने चार्ट में इनपुट मान के समान डेटा का उपयोग करना चाहता हूं। मैं यह कैसे कर सकता हूं?

Answer 1

• कॉल डेटा
• के लिए कि सेवा कारखाने के साथ एक सेवा बनाएं उपयोग केवल 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] 
     }] 
     }; 
    } 
    }; 
}); 

एचटीएमएल:

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

Answer 2

पूर्ण प्रकटीकरण, मैं ZingChart टीम के एक सदस्य हूँ।

यह सटीक कार्यक्षमता जिसे आप ढूंढ रहे हैं वह डेटा बाध्यकारी है। चार्ट में डेटा बाइंडिंग तत्वों के लिए हमारे angularjs-charts पृष्ठ पर हमारे पास दस्तावेज़ हैं।

आपके मामले में जो कुछ भी आप चाहते हैं उसे प्राप्त करने के लिए कुछ कदमों की आवश्यकता है। मेरा पहला सुझाव एनजी-इनिट में आपके विचार से अनावश्यक नियंत्रक तर्क लेना होगा और इसे निर्देश के अंदर रखना होगा। बस एक सुझाव, जरूरी नहीं है। इस उत्तर के लिए मेरा प्रारूप नियंत्रक के अंदर सबसे अधिक सब कुछ रखेगा।

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 सेकंड के बाद ग्राफ बदलाव को प्रतिबिंबित करने के लिए एक $ टाइमआउट निर्धारित किया है। यह $ टाइमआउट किसी डीबी अपडेट से किसी प्रकार के ऑब्जेक्ट चेंज की नकल करना है। मूल्यों को अपडेट करने के दो तरीके हैं लेकिन यह देखने के लिए कि हमें ज़िंग चार्ट एंगुलर निर्देश के बारे में और अधिक क्यों सीखना चाहिए।

आप HTML में zc-values और न सिर्फ zc-jsoncode$watchCollection() का उपयोग करके zc-values पर एक गहरी समानता घड़ी है क्योंकि उपयोग करना चाहिए।

"$ watchCollection() फ़ंक्शन दो $ घड़ी() कॉन्फ़िगरेशन के बीच मध्य-ग्राउंड का एक प्रकार है। यह वेनिला $ घड़ी() फ़ंक्शन से अधिक गहराई से है, लेकिन, यह लगभग महंगा नहीं है गहरी समानता $ घड़ी() फ़ंक्शन के रूप में। $ घड़ी() फ़ंक्शन की तरह, $ watchCollection() भौतिक ऑब्जेक्ट संदर्भों की तुलना करके काम करता है, हालांकि, $ watch() फ़ंक्शन के विपरीत, $ watchCollection() एक-स्तर चला जाता है गहरा और संग्रह में शीर्ष स्तर की वस्तुओं का एक अतिरिक्त, उथला संदर्भ जांच करता है। " - referenced here.

Thats क्यों यह केवल मेरे उदाहरण में काम करेगा जब मैं AValues ​​सरणी में संदर्भ बदलता हूं।

आप देख सकते हैं कि $ टाइमआउट के अंदर चार्ट के मूल्यों को अपडेट करने के दो तरीके हैं। क्योंकि आपके पास आंतरिक सरणी में परिवर्तन करने वाले सरणी की सरणी दिखाई दे रही है क्योंकि वे गहरे ऑब्जेक्ट गुण हैं। आप परिवर्तन को प्रतिबिंबित करने के लिए एक एकल सरणी को अद्यतन करने के लिए माता-पिता में वापस बल दिया जाना चाहिए देख सकते हैं। माता-पिता पर एक परिवर्तन सीधे संदर्भ अपडेट करेगा और एक पंक्ति में परिवर्तन को प्रतिबिंबित करेगा।

Codepen डेमो here.

अधिक कोणीय/ZingChart लिंक

1. Angular Page
2. ZingChart Codepen