谷歌图表，设置轴上的最小范围-Java 学习之路

我有一个线/面积图，我想在y轴上设置一个最小范围 . 假设我的观点是 [0,300],[1,270],[2,230],[3,260] （那些是通过ajax检索的，所以它们不是静态的） . 我希望y轴范围至少为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;
   }
}

1 回答

您可以使用DataTable上的getColumnRange method来查找最小值和最大值

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

回复于 2024-04-29T21:27:33+08:00

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

1 回答

相关问题