कोणीय-ग्रिडस्टर

Question

में हाइचार्ट्स को एकीकृत करना highcharts-ngAngular-grister (एक डैशबोर्ड/विजेट कोणीय निर्देश) के अंदर कोणीय निर्देश का उपयोग करके हाइहार्ट्स को एकीकृत करने का प्रयास कर रहा हूं।

यहाँ मेरी HTML है:

<div ng-controller="myCtrl"> 
    <div gridster="gridsterOptions"> 
     <ul> 
      <li gridster-item="item" ng-repeat="item in standardItems"> 
       <highchart id="chart1" config="chartConfig" class="chart"></highchart> 
      </li> 
     </ul> 
    </div> 
</div> 

मेरे सीएसएस स्टाइल:

body { 
    color: #858584; 
    background-color: #e0e0e0; 
} 
.gridster .gridster-item { 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
    color: #004756; 
    background: #ffffff; 
    padding: 10px; 
} 
.chart { 
    border:1px #000 solid; 
} 

और मेरे कोणीय एप्लिकेशन:

var myApp = angular.module('myApp', ['gridster', 'highcharts-ng']); 

myApp.controller('myCtrl', function ($scope) { 
    $scope.gridsterOptions = { 
     margins: [20, 20], 
     columns: 4, 
     rowHeight: 300, 
     pushing: true, 
     floating: true, 
     swapping: true, 
     resizable: { 
      enabled: true 
     }, 
     draggable: { 
      enabled: true 
     } 
    }; 

    $scope.standardItems = [{ 
     sizeX: 2, 
     sizeY: 1 
    }, { 
     sizeX: 2, 
     sizeY: 1 
    }]; 

    $scope.chartConfig = { 
     options: { 
      chart: { 
       type: 'bar' 
      } 
     }, 
     series: [{ 
      data: [10, 15] 
     }], 
     title: { 
      text: 'Hello' 
     }, 

     loading: false 
    }; 
}); 

यह विजेट के साथ कुछ इस तरह का परिणाम ग्रिडस्टर डैशबोर्ड:

1. Highchart घटकों की ऊंचाई हमेशा 400 पिक्सल है:

   उत्तरदायी लेआउट के बारे में दो मुद्दों है। वे डैशबोर्ड विजेट के अंदर स्थित हैं और विजेट के समान ऊंचाई होना चाहिए। वर्तमान में वे अपने डैशबोर्ड विजेट के बाद उच्च हैं और उनकी सामग्री बह रही है।

2. प्रतिपादन करते समय, हाइचार्ट्स घटक उनके कंटेनर के बाद व्यापक होते हैं। अगर मैं खिड़की का आकार बदलता हूं तो वे चित्रित होते हैं और चौड़ाई अब सही होती है।

मैं इन मुद्दों को कैसे ठीक कर सकता हूं?

JSFiddle पर मेरे डेमो उदाहरण देखें: http://jsfiddle.net/dennismadsen/xxy2uy9x/

Answer 1

मुझे लगता है कि इस this one या this one सवाल का डुप्लिकेट है। या कम से कम जवाब बहुत समान है।

संक्षेप में: जब चार्ट प्रदान की गई है, चौड़ाई और कंटेनर के लिए ऊंचाई हैं undefined या 0 (कंटेनर डोम का हिस्सा नहीं है या display: none द्वारा छिपा है) जो कि डिफ़ॉल्ट चौड़ाई और चार्ट के लिए ऊंचाई में परिणाम है,।

वर्कअराउंड ब्राउज़र (और कोणीय) एक सांस दे रहा है और setTimeout (या $timeout) फोन में chart.reflow() चार्ट कंटेनर के लिए अनुकूल करने के लिए अनुमति देने के लिए, देखें: http://jsfiddle.net/xxy2uy9x/5/

$scope.chartConfig = { 
    options: { 
     chart: { 
      type: 'bar', 
      events: { 
       load: function() { 
        var c = this; 

        setTimeout(function() { 
         c.reflow(); 
        }, 123) 
       } 
      } 
     } 
    }, 
    series: [{ 
     data: [10, 15] 
    }], 
    title: { 
     text: 'Hello' 
    }, 

    loading: false 
};