0
Angularjs kullanarak uygulamanızda bazı istatistikleri göstermek için Highcharts kullanıyorum. Sayfa yüklendiğinde grafik iyi yüklenir. Highchart, açısal js içinde düzgün şekilde yeniden boyutlandırmıyor
Ben yönünü değiştirmek
, it looks like
ve ben manzara portre yönünü değiştirdiğinizde tekrar some thing looks like
birçok şekilde css değiştirmeye çalışmış ama öyle değil tam ekran olarak her zaman uygun. Herhangi biri yüksek şemanın oryantasyon değişikliğine neden cevap vermediğini biliyor mu?
DÜZENLEME: kod aşağıda deneyebilir miyim
var chart1 = new Highcharts.chart('demograph', {
\t \t \t \t \t \t
\t \t \t \t \t \t "options": {
\t \t \t \t \t \t \t "chart": {
\t \t \t \t \t \t \t "type": "areaspline"
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t },
\t \t \t \t \t \t \t "plotOptions": {
\t \t \t \t \t \t \t "series": {
\t \t \t \t \t \t \t "stacking": ""
\t \t \t \t \t \t \t }
\t \t \t \t \t \t \t }
\t \t \t \t \t \t \t },
\t \t \t \t \t \t \t "series": [
\t \t \t \t \t \t \t {
\t \t \t \t \t \t \t "name": "Highest",
\t \t \t \t \t \t \t "data": [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
\t \t \t \t \t \t \t "type": "column",
\t \t \t \t \t \t \t "id": "series-0"
\t \t \t \t \t \t \t },
\t \t \t \t \t \t \t {
\t \t \t \t \t \t \t "name": "Lowest",
\t \t \t \t \t \t \t "data": [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5],
\t \t \t \t \t \t \t "type": "column",
\t \t \t \t \t \t \t "id": "series-1"
\t \t \t \t \t \t \t },
\t \t \t \t \t \t \t {
\t \t \t \t \t \t \t "name": "Average",
\t \t \t \t \t \t \t "data": [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0],
\t \t \t \t \t \t \t "type": "column",
\t \t \t \t \t \t \t "id": "series-2"
\t \t \t \t \t \t \t },
\t \t \t \t \t \t \t {
\t \t \t \t \t \t \t "name": 'Louis',
\t \t \t \t \t \t \t "data": [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8],
\t \t \t \t \t \t \t "id": "series-3",
\t \t \t \t \t \t \t "type": "line"
\t \t \t \t \t \t \t }
\t \t \t \t \t \t \t ],
\t \t \t \t \t \t \t "title": {
\t \t \t \t \t \t \t "text": "Progress Report"
\t \t \t \t \t \t \t },
\t \t \t \t \t \t \t "credits": {
\t \t \t \t \t \t \t "enabled": true
\t \t \t \t \t \t \t },
\t \t \t \t \t \t \t "loading": false,
\t \t \t \t \t \t \t "size": {},
\t \t \t \t \t \t \t "xAxis": {
\t \t \t \t \t \t \t "categories": ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
\t \t \t \t \t \t \t "title": {text: 'Tests'}
\t \t \t \t \t \t },
\t \t \t \t \t \t "yAxis": {
\t \t \t \t \t \t \t "title": {text: 'Marks Obtained'}
\t \t \t \t \t \t },
\t \t \t \t \t \t \t });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="col-md-12 col-sm-12 col-xs-12 myclass2" style="">
<div id="demograph" class="clsdemograph" >Placeholder for chart</div>
</div>
Kullandığınız demo kodunu html/css sağlayabiliyor musunuz? jsfiddle'ı bu – shershen
için kullanabilirsiniz. Aslında, dinamik içerik ve css gibi kod eklemenin ne kadar karmaşık olduğunu da eklemedim. Ama bir parça kod sağlayabilsem deneyeyim. –
@shershen. Demo kodu eklendi. Lütfen kontrol edin. –