javascript - 谷歌图表，在轴上设置最小范围

Question

我有一个折线图/面积图，我想在 y 轴上设置一个最小范围。 假设我的点是 [0,300],[1,270],[2,230],[3,260](这些点是通过 ajax 检索的，因此它们不是静态的)。 我希望 y 轴范围至少为 100，但默认情况下，谷歌会将最大值设置为最大值(在本例中为 300)，将最小值设置为最小值(在本例中为 230)，因此在这种情况下的范围为(它实际上是)70，我希望它至少是 100，所以图表最大值应该是 (300+230)/2+50 和最小值 (300+230)/2 -50，这样我就有了一个 100 的范围，图表我垂直居中对齐。

我希望范围有最小值而不是最大值，如果我的点是 [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 上找到最小值和最大值

然后应用您的逻辑在 vAxis 上设置 viewWindow

请参阅以下工作片段...

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>