谷歌圖表獲取最大規模

Question

我試圖盡一切積極氣泡圖必須使用baseline屬性，像這樣繪製象限象限：

var dataT = google.visualization.arrayToDataTable(.....); 
var options = { 
    hAxis: {title: 'h axis',baseline:100}, 
    vAxis: {title: 'v axis',baseline:20}, 
    ...} 
var chart = new google.visualization.BubbleChart(...); 
chart.draw(dataT,options); 

除圖形將繼續根據查詢變化如此所有圖表的基線不會相同。我希望能夠獲得最大軸值並將其除以2，以將基線設置在每個軸的中間。

實施例：

var options = { 
    hAxis: {title: 'h axis',baseline:max_h_axis/2}, 
    vAxis: {title: 'v axis',baseline:max_v_axis/2}, 
    ... 

是否有圖形繪製之前知道的曲線圖的最大軸值的方法嗎？

Answer 1

的getColumnRange方法適用於這個...

返回指定列值的最小值和最大值。返回的對象具有最小值和最大值屬性。如果範圍沒有值，min和max將包含null。

你也可以使用這些信息來產生你自己的座標軸刻度。

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['X', 'Y'], 
 
     [8, 120], 
 
     [4, 155], 
 
     [11, 140], 
 
     [4, 205], 
 
     [3, 35], 
 
     [6, 78] 
 
    ]); 
 

 
    var ticksX = []; 
 
    var ticksY = []; 
 
    var numberOfTicks = 10; 
 

 
    var rangeX = data.getColumnRange(0); 
 
    var rangeY = data.getColumnRange(1); 
 

 
    var stepX = Math.ceil((rangeX.max - rangeX.min)/numberOfTicks); 
 
    for (var i = rangeX.min - stepX; i <= rangeX.max + stepX; i = i + stepX) { 
 
     ticksX.push(i); 
 
    } 
 

 
    var stepY = Math.ceil((rangeY.max - rangeY.min)/numberOfTicks); 
 
    for (var i = rangeY.min - stepY; i <= rangeY.max + stepY; i = i + stepY) { 
 
     ticksY.push(i); 
 
    } 
 

 
    var baseX = Math.ceil((rangeX.max - rangeX.min)/2) + rangeX.min; 
 
    var baseY = Math.ceil((rangeY.max - rangeY.min)/2) + rangeY.min; 
 

 
    var options = { 
 
     hAxis: { 
 
     title: 'h axis', 
 
     baseline: baseX, 
 
     ticks: ticksX 
 
     }, 
 
     vAxis: { 
 
     title: 'v axis', 
 
     baseline: baseY, 
 
     ticks: ticksY 
 
     }, 
 
     legend: 'none', 
 
     height: 600, 
 
     width: 600 
 
    }; 
 

 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>