angularjs - Angular-nvd3-directives adjust height of the chart according to the width of the chart -

मैं कोणीतरी-एनवीडी 3-निर्देशों का उपयोग कर एक लाइन चार्ट बनाने का प्रयास कर रहा / रही हूं। इसे अच्छी तरह से देखने के लिए मुझे ऊंचाई विशेषता को "250" पर सेट करने की आवश्यकता है, जो अच्छा बड़े और मध्यम स्क्रीन दिखता है। लेकिन, छोटी स्क्रीन पर यह अजीब दिखाई देगा क्योंकि ऊँचाई तय हो गई है, और चौड़ाई वैल्यू बहुत छोटा होगी, फिर ऊंचाई यदि मूल्य के लिए ऊंचाई की विशेषता सेट न करें, तो यह बहुत व्यापक होगा मैं चाहता हूँ कि y- अक्ष की ऊंचाई चार्ट के चौड़ाई के समान मूल्य के समान हो। क्या यह संभव है? या फिर इसका समाधान करने का कोई अन्य तरीका क्या है?

यहां एक ऐसा प्लंकर है जो समस्या को दर्शाता है

HTML

  & Lt; div वर्ग = "कंटेनर" & gt; & Lt; div id = "topgraph" वर्ग = "पंक्ति अच्छी तरह से" & gt; & Lt; div वर्ग = "col-md-6" & gt; & Lt; div ng-controller = "report" & gt; & Lt; nvd3-line-chart डेटा = "चार्टडाटा" id = "report3" showXAxis = "true" showYXx = "true" टूलटिप्स = "सही" मार्जिन = "{बाएं: 90, शीर्ष: 20, नीचे: 20, सही: 20} "ऊंचाई =" 250 "& gt; & Lt;! - मैं उस विशेषता को चौड़ाई के अनुसार समायोजित करना चाहता हूं - & gt; & LT; svg & gt; & lt; / svg & gt; & Lt; / nvd3-लाइन-चार्ट & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; div वर्ग = "col-md-6" & gt; & Lt; h3 शैली = "मार्जिन-टॉप: 2em;" & gt; सांख्यिकी & lt; / h3 & gt; & LT; ul & gt; & Lt; li & gt; प्रति दिन एवरेज पोस्ट: & lt; मजबूत & gt; 4 & lt; / strong & gt; & Lt; / li & gt; & Lt; li & gt; अधिकतम पोस्ट प्रति दिन: & lt; मजबूत & gt; 3 & lt; / strong & gt; & Lt; / li & gt; & Lt; li & gt; प्रति दिन न्यूनतम पोस्ट: & lt; मजबूत & gt; 2 & lt; / strong & gt; & Lt; / li & gt; & Lt; li & gt; पदों की संख्या: & lt; मजबूत & gt; 1 & lt; / strong & gt; & Lt; / li & gt; & Lt; / ul & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; / div & gt;  

जावास्क्रिप्ट

  var ऐप = कोणीय। मॉड्यूल ('ऐप', ['एनवीडी 3 चार्ट डायरेक्टिव्स']); App.controller ('रिपोर्ट', ['$ scope', रिपोर्ट]); फ़ंक्शन रिपोर्ट ($ दायरा) {$ scope.chartData = [{"कुंजी": "कुंजी 1", "मान": [[1, 150000.0], [2, 1000000.0], [3, 1071000.0], [4, 1271000.0] , [5, 1371000.0], [6, 1471000.0], [7, 1571000.0], [8, 1671000.0], [9, 1771000.0], [10, 1871000.0], [11, 1 9 71000.0], [12, 2271000.0]]} , {"कुंजी": "कुंजी 2", "मूल्य": [[1, 150000.0], [2, 1200000.0], [3, 1371000.0], [4, 1 9 71000.0], [5, 1371000.0], [6, 1471000.0 ], [7, 1571000.0], [8, 1671000.0], [9, 1771000.0], [10, 1871000.0], [11, 1971, 000.0], [12, 2271000.0]]}]}  

< P> यह पहली बार मैंने एक लिंक्ड लिखा है, लेकिन मुझे उम्मीद है कि यह मेरा इरादा है जैसा काम करता है

चार्ट पर सभी ऊंचाई और चौड़ाई विशेषताओं को निकालें यह अपने कंटेनर के लिए स्वत: आकार होगा।

फिर आप इच्छित पहलू अनुपात को प्राप्त करने के लिए कंटेनर पर सामान्य सीएसएस का उपयोग करें।