स्टैक्ड बार + लाइन चार्ट कोणीय लाइब्रेरी

Question

क्या कोई एंजुलरज लाइब्रेरी है जो स्टैक्ड बार + लाइनों के साथ चार्ट खींच सकती है? इस तरह:

मैं कोणीय निर्देशों के साथ इसका समर्थन करने वाली किसी भी पुस्तकालय की तलाश में हूं। मुझे कोणीय-एनवीडी 3-निर्देश मिले हैं, जो मल्टीचर्ट्स (संयुक्त चार्ट प्रकार) का समर्थन करते हैं, लेकिन मुझे नहीं लगता कि यह बार स्टैकिंग का समर्थन करता है, केवल समूहबद्ध करता है।

मुझे पता है कि ये प्रश्न SO के लिए उपयुक्त नहीं हैं, मैं किसी भी, एक, lib, सिफारिशों की तलाश नहीं कर रहा हूं। (इसे वाणिज्यिक उपयोग के लिए भी मुक्त होना चाहिए)

Answer 1

ZingChart-AngularJS निर्देश संपूर्ण ज़िंग चार्ट लाइब्रेरी का खुलासा करता है, जो मिश्रित चार्ट का समर्थन करता है। यह वाणिज्यिक उपयोग के लिए स्वतंत्र है।

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

app.controller('MainController', function($scope) { 
    $scope.myJson = { 
    "type": "mixed", 
    "background-color": "white", 
    "plot": { 
     "stacked": true 
    }, 
    "series": [{ 
     "type": "bar", 
     "values": [25, 30, 15, 20, 25], 
     "stack": 1, 
     "background-color": "#4372c1", 
     "hover-state": { 
     "visible": false 
     }, 
    }, { 
     "type": "bar", 
     "values": [20, 10, 30, 25, 15], 
     "stack": 1, 
     "background-color": "#ea4204", 
     "hover-state": { 
     "visible": false 
     }, 
    }, { 
     "type": "line", 
     "values": [25, 30, 15, 20, 25], 
     "line-color": "#38408c", 
     "marker": { 
     "background-color": "#38408c", 
     "border-color": "#38408c" 
     }, 
     "hover-state": { 
     "visible": false 
     } 

    }, { 
     "type": "line", 
     "values": [25, 30, 15, 20, 25], 
     "line-color": "#38408c", 
     "marker": { 
     "background-color": "#38408c", 
     "border-color": "#38408c" 
     }, 
     "hover-state": { 
     "visible": false 
     }, 
    },] 
    }; 
}); 

Answer 2

कोणीय nvd3 इस का समर्थन करता है: I made a demo on CodePen of what you're looking for.

यहाँ अपने जे एस दिखाई देंगे है। आपको बस इतना करना है bars1.stacked = सच और सच =

http://plnkr.co/edit/2gSaYHgNkuNjbj9SGrWt?p=preview

$scope.options = { 
    chart: { 
    type: 'multiChart', 
    ... 
    bars1: {stacked:true}, 
    bars2: {stacked:true}, 
    ... 
    }; 
    } 
}