Google chart, задайте минимальный диапазон по оси

Question

У меня есть диаграмма линии/области, я хочу установить минимальный диапазон по оси y. Скажем, мои очки: [0,300],[1,270],[2,230],[3,260] (они извлекаются через ajax, поэтому они не являются статическими). Я хочу, чтобы диапазон у-оси составлял не менее 100, но по умолчанию Google будет устанавливать максимальное максимальное значение (в данном случае 300) и минимум при минимальном значении (в данном случае 230), поэтому диапазон в этом случае будет равен (и это на самом деле) 70, я хочу, чтобы он был как минимум 100, поэтому максимальный график должен быть (300+230)/2+50 и минимум (300+230)/2-50, так что у меня есть диапазон 100, а диаграмма i по вертикали выровнена по центру.

Я хочу, чтобы диапазон имел минимум, но не максимум, если мои точки равны [0,100],[1,240],[5,160], тогда диапазон должен соответствовать диапазону данных (в этом случае 140), если оптимальный размер меньше (100).

В принципе, я не хочу, чтобы график показывал большую разницу, когда фактическая разница в данных мала. Я знаю, как установить фиксированный максимум и минимум на оси, но это не решает мою проблему. Это мой фактический код:

$.fn.createChart = function(url,options){ 
var obj = $(this); 
console.log('CREATING CHART: '+url); 
// Load the Visualization API and the linechart package. 
if(!$.canAccessGoogleVisualization()){ 
    google.charts.load('current', {packages: ['corechart', 'line']}); 
} 


// Set a callback to run when the Google Visualization API is loaded. 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
    var jsonData = $.ajax({ 
     url: url , 
     dataType: "json", 
     async: false 
     }).responseText; 

    // Create our data table out of JSON data loaded from server. 
    var data = new google.visualization.DataTable(jsonData); 

//Default options 
var def = { 
     width: obj.width(), 
     height: obj.height(), 
     curveType: 'function', 
     legend: { position: 'bottom' }, 
     hAxis: { 
       format: 'dd/MM' 
      }, 

      animation:{ 
       "startup": true, 
    duration: 1000, 
    easing: 'out', 
    } 
    }; 

//Overwrite default options with passed options 
    var options = typeof options !== 'undefined' ? $.mergeObjects(def,options) : def; 

    // Instantiate and draw our chart, passing in some options. 
    var chart = new google.visualization.AreaChart(obj.get(0)); 
    chart.draw(data, options); 
} 

} 
$.mergeObjects = function(obj1,obj2){ 
for (var attrname in obj2) { obj1[attrname] = obj2[attrname]; } 
return obj1; 
} 
$.canAccessGoogleVisualization = function() 
{ 
    if ((typeof google === 'undefined') || (typeof google.visualization === 'undefined')) { 
    return false; 
    } 
    else{ 
    return true; 
    } 
} 

Answer 1

вы можете использовать getColumnRange method на DataTable, чтобы найти мин и макс

затем применить вы логика установить viewWindow на vAxis

см следующий рабочий фрагмент кода ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['X', 'Y'], 
 
     [0, 300], 
 
     [1, 270], 
 
     [2, 230], 
 
     [3, 260] 
 
    ]); 
 

 
    var yMin; 
 
    var yMax; 
 
    var columnRange = data.getColumnRange(1); 
 
    if ((columnRange.max - columnRange.min) < 100) { 
 
     yMin = ((columnRange.max + columnRange.min)/2) - 50; 
 
     yMax = ((columnRange.max + columnRange.min)/2) + 50; 
 
    } else { 
 
     yMin = columnRange.min; 
 
     yMax = columnRange.max; 
 
    } 
 

 
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
 
    chart.draw(data, { 
 
     vAxis: { 
 
     viewWindow: { 
 
      min: yMin, 
 
      max: yMax 
 
     } 
 
     } 
 
    }); 
 
    }, 
 
    packages: ['corechart'] 
 
});

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