谷歌图表，设置轴上的最小范围

Google chart, set minimum range on axis

本文关键字：最小范围 设置 谷歌      更新时间：2023-09-26

我有一个折线图/面积图，我想在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的范围，图表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;
   }
}

您可以在DataTable上使用getColumnRange方法来查找最小和最大

然后应用您的逻辑在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>

相关文章：