Google Haritaları'nda maksimum ve minimum değerler

Question

Bir Google Grafik'te maksimum ve minimum bir değeri nasıl ayarlayabilirim?

Ben başarılı olamadı bu denedim: Bu benim tüm kod kullanıyorum edilir

vAxis: { 
    viewWindowMode:'explicit', 
     viewWindow: { 
      max:3000, 
      min:500 
     } 
    } 

:

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
     google.load("visualization", "1.1", {packages:["bar"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Year', 'Sales', 'Expenses', 'Profit'], 
      ['2014', 1000, 400, 200], 
      ['2015', 1170, 460, 250], 
      ['2016', 660, 1120, 300], 
      ['2017', 1030, 540, 350] 
     ]); 

     var options = { 
      chart: { 
      title: 'Company Performance', 
      subtitle: 'Sales, Expenses, and Profit: 2014-2017', 
      }, 
      vAxis: { 
      viewWindowMode:'explicit', 
      viewWindow: { 
       max:3000, 
       min:500 
      } 
     }, 
      bars: 'vertical' // Required for Material Bar Charts. 
     }; 

     var chart = new google.charts.Bar(document.getElementById('barchart_material')); 

     chart.draw(data, options); 
     } 
</script> 

(https://developers.google.com/chart/interactive/docs/gallery/barchart den örnek) önceden

Thks.

Answer 1

Materyal Grafikleri yayınlandığında, Google seçeneklerin nasıl belirtildiğini değiştiriyor. Bu seçeneklerin yapısı henüz sonuçlandırılmamış olduğundan, Google, klasik seçenek yapısı için yeni bir dönüştürücü işlevi sunar ve gelecekte değişebilecek seçenekleri kullanmak yerine onu kullanmanız önerilir.

Yani iki yoldan birini kullanarak sorunu çözmek olabilir: Google'ın önerisi olarak,

1. Dönüştürme işlevini kullanabilirsiniz (Eğer bu yöntem this jsfiddle veya Google's official documentation gösterilmiştir görebilirsiniz (sağ notu dikkat bağlı başlığı alt))

 google.load("visualization", "1.0", {packages:["bar"]}); 
 
     google.setOnLoadCallback(drawChart); 
 
     function drawChart() { 
 
     var data = google.visualization.arrayToDataTable([ 
 
      ['Year', 'Sales', 'Expenses', 'Profit'], 
 
      ['2014', 1000, 400, 200], 
 
      ['2015', 1170, 460, 250], 
 
      ['2016', 660, 1120, 300], 
 
      ['2017', 1030, 540, 350] 
 
     ]); 
 

 
     var options = { 
 
      chart: { 
 
      title: 'Company Performance', 
 
      subtitle: 'Sales, Expenses, and Profit: 2014-2017', 
 
      }, 
 
      vAxis: { 
 
      viewWindowMode:'explicit', 
 
      viewWindow: { 
 
       max:3000, 
 
       min:500 
 
      } 
 
     }, 
 
      bars: 'vertical', // Required for Material Bar Charts. 
 
      width: 800, 
 
      height: 600 
 
     }; 
 

 
     var chart = new google.charts.Bar(document.getElementById('barchart_material')); 
 
      
 

 
     chart.draw(data, google.charts.Bar.convertOptions(options)); 
 
     }

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> 
 
    
 
      <div id="barchart_material"></div> 
 
     
 

2. Gelecekte değişebilecek seçenekleri kullanmaya devam edebilirsiniz. Grafiklerinizin kırılmasıyla ilgilenmiyorsanız, aradığınız seçenek axes.y.all.range. {Min, max}. Bu seçeneği this jsfiddle'da görebilirsiniz.

google.load("visualization", "1.0", { 
 
    packages: ["bar"] 
 
}); 
 
google.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Year', 'Sales', 'Expenses', 'Profit'], 
 
     ['2014', 1000, 400, 200], 
 
     ['2015', 1170, 460, 250], 
 
     ['2016', 660, 1120, 300], 
 
     ['2017', 1030, 540, 350] 
 
    ]); 
 

 
    var options = { 
 
     chart: { 
 
      title: 'Company Performance', 
 
      subtitle: 'Sales, Expenses, and Profit: 2014-2017', 
 
     }, 
 
     axes: { 
 
      y: { 
 
       all: { 
 
        range: { 
 
         max: 3000, 
 
         min: 500 
 
        } 
 
       } 
 
      } 
 
     }, 
 
     bars: 'vertical', // Required for Material Bar Charts. 
 
     width: 800, 
 
     height: 600 
 
    }; 
 

 
    var chart = new google.charts.Bar(document.getElementById('barchart_material')); 
 

 

 
    chart.draw(data, options); 
 
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> 
 
<div id="barchart_material"></div>

Kaynak: Google Charts üzerinde çalışmak.