2016-04-08 22 views
2

için eksen başlangıç ​​noktası nasıl ayarlanır How to set Axis step in Google Chart?, Trying to set y axis to 0 in google charts'dan verilen çok sayıda çözümü denedim ve herhangi bir şans olmadan baktığım diğer birkaç gönderiyi denedim. Y eksenini 0 başlangıç ​​noktasına ayarlamak için neler yapılabileceği konusunda bir fikri var mı? Gerekirse daha fazla bilgi sağlayabilirim. Ayrıca bir yan soru, tıklandığında ön tarafa bir çizgi getirmek mümkündür. Örneğin, mevcut trend çizgisine tıkladığınızda, bu, ancak veri noktaları onlar için görünmüyor.Google Matrix

<div id="thelinechart" style="width: 1000px; height: 550px"></div> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script>google.charts.load('current', {'packages':['line']}); 
     google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 

     var data = new google.visualization.DataTable();data.addColumn('string','Year'); 
data.addColumn('number','Current Trend'); 
data.addColumn('number','2015 Projection'); 
data.addColumn('number','2016 Projection'); 
data.addColumn('number','2017 Projection'); 
data.addColumn('number','2018 Projection'); 
data.addRows([ 
['2015',250,250,null,null,null],['2016',200,300,200,null,null],['2017',200,310,230,200,null],['2018',290,340,320,280,290],['2019',null,370,350,360,290],['2020',null,null,430,470,390],['2021',null,null,null,520,440],['2022',null,null,null,null,450] 
]); 

     var options = { 
     chart: { 
      title: 'Capacity', 
      subtitle: 'in weight' 
     }, 
     width: 850, 
     height: 450, 
vAxis: { 
     viewWindowMode: 'explicit', 
     viewWindow: { 
      //max: 8000, 
      min: 0, 
     }, 
     gridlines: { 
      count: 18, //set kind of step (max-min)/count 
     } 
     } 
     }; 

     var chart = new google.charts.Line(document.getElementById('thelinechart')); 

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

Kodumun bulunduğu bir jsfiddle bağlantım var. Örneğin aşağıdaki paket bağlı, Malzeme Grafikler için seçenekleri dönüştürmek için https://jsfiddle.net/abufr36y/

+0

jsfiddle bağlantısı düzeltilmiş cevapla: https://jsfiddle.net/abuf r36y/4/ – Chris

cevap

2

İhtiyacı ...

google.charts.Line.convertOptions(options)

göster ... güncellenen

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['line'] 
 
}); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string','Year'); 
 
    data.addColumn('number','Current Trend'); 
 
    data.addColumn('number','2015 Projection'); 
 
    data.addColumn('number','2016 Projection'); 
 
    data.addColumn('number','2017 Projection'); 
 
    data.addColumn('number','2018 Projection'); 
 
    data.addRows([ 
 
    ['2015',250,250,null,null,null],['2016',200,300,200,null,null],['2017',200,310,230,200,null],['2018',290,340,320,280,290],['2019',null,370,350,360,290],['2020',null,null,430,470,390],['2021',null,null,null,520,440],['2022',null,null,null,null,450] 
 
    ]); 
 

 
    var options = { 
 
    chart: { 
 
     title: 'Capacity', 
 
     subtitle: 'in weight' 
 
    }, 
 
    width: 850, 
 
    height: 450, 
 
    vAxis: { 
 
     viewWindowMode: 'explicit', 
 
     viewWindow: { 
 
     //max: 8000, 
 
     min: 0, 
 
     }, 
 
     gridlines: { 
 
     count: 18, //set kind of step (max-min)/count 
 
     } 
 
    } 
 
    }; 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 2, 3, 4, 5, 1]); 
 

 
    var chart = new google.charts.Line(document.getElementById('thelinechart')); 
 

 
    // convert options for Material Charts, use view vs. data 
 
    chart.draw(view, google.charts.Line.convertOptions(options)); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="thelinechart"></div>

+0

Teşekkür ederim. @WhiteHat Çizgi ortaya çıkarıldığında, 'Geçerli Trend' üzerine tıkladıktan sonra satırın kalınlaştığını ve diğer her şeyin gizlendiğini varsayalım. Ancak, veri noktasının üzerine geldiğinizde, Geçerli Trend bilgisini göremezsiniz. Örneğin, 2015 veri noktasının üzerine gelin ve Geçerli Trend yerine 2015 Projeksiyonu elde edersiniz. – Chris

+1

Ne demek istediğimi anladım - bkz. Düzenle - sütunun konumunu değiştirmek için bir görünüm kullanabilirsiniz, "noktaları ileriye taşıyor", ancak diğer satırlardaki noktalar, üzerine geldiğinizde görünmüyor ... – WhiteHat

+0

Mükemmeldi, verileri dinamik olarak yüklediğimden bu yana sütunları dinamik olarak ayarlamak için kodumu güncelledim. Her zaman ikinci sütunu dizinin son konumuna dahil ediyorum. Yardım için teşekkürler. – Chris

İlgili konular