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

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

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


-

Comments

Post a Comment

Popular posts from this blog

php - Select box validation (in laravel) -

I have a text that includes text input and selection box. I was trying to apply Laravel validation. I now want to retain user input values ​​if the verification does not succeed. I'm able to get it on the input box, but not on the selection box. This is my code {{form :: select ('vehicles_year'), how the first selected value (in the selection box) will show. $ Model year, '-1', ['id' = & gt; 'Vehicles_year'])}} & lt; Span class = "help-block" id = "vehicles_year_error" & gt; @if ($ errors-> ('vehicles_year')) {{$ errors- & gt; First ('vehicles_year')}} @endif & lt; / Span & gt; -1 I am the default value key when I am showing the form load. What I do is that I add the "default" option which is "nothing" Is set to. In the validity rules, I say this value is necessary. If the user does not choose any of the other options, the verification fails. $ op...
Read more

html - Tabindex not working for button -

I am using a button to submit my form, but the tabindex works on everything but the button I can not get the button to highlight everyone by using the tab key. & lt; Button type = "submit" class = "button" tabindex = "11" & gt; Submit & lt; / Button & gt; Any ideas? I just tried to make this issue but my example works. & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Title & gt; & Lt; / Title & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Input type = "text" tabindex = "1" /> & Lt; Input type = "text" tabindex = "2" /> & Lt; Input type = "text" tabindex = "3" /> & Lt; Input type = "text" tabindex = "4" /> & Lt; Button type = "submit" tabindex = "5" & gt; Submit & lt; / Button & gt; & Lt; / Body & gt; ...
Read more

java - Joda Time Interval Not returning what I expect -

मेरे पास निम्न प्रोग्राम है import java.util। *; Import java.text। *; आयात करें org.joda.time। *; सार्वजनिक श्रेणी के स्कोप कंट्रोल {सार्वजनिक स्थिर अंतराल मिलनसार () {दिनांक समय currDate = नया दिनांक समय (2008, 4, 4, 15, 30, 0, 0); दिनांक समय epochDate = नया दिनांकटाइम (2000, 1, 1, 12, 0, 0, 0); अंतराल अंतराल = नया अंतराल (युरोप डेट, करोडेट); वापसी अंतराल; } सार्वजनिक स्थिर शून्य मुख्य (स्ट्रिंग [] आर्ग्स) {डबल दिनबात = मिलते समय ()। ToDurationMillis () / 1000/60/60/24; StdOut.println (daysBtween); }} मुझे आउटपुट मिल रहा है: 3016.0 लेकिन जो मैं देख रहा हूं वह है: 3016.1458333333 मैं क्या कर रहा हूँ ? toDurationMillis एक लंबा लौटा देता है, और प्रत्येक प्रभाग को int के रूप में घोषित किया जाता है। जावा इस प्रकार इनट्स को लॉन्ग में परिवर्तित कर देगा और डिवीजन को लंबे समय तक लौटाना होगा। परिणाम को अंत में दोहरे रूप में परिवर्तित करना। डबल्स का उपयोग करके अभिव्यक्ति करने के लिए जावा को बताने के लिए, अभिव्यक्ति के किसी भी घटक को दोहरे रूप में घोषित करें। उदाहरण के लिए: ...
Read more