Google Charts Get maximum scale

问题

I'm trying to make an all positive bubble chart have quadrants by drawing the quadrants using the baseline property like so:

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);

Except the graph will keep changing depending on the query so the baselines will not be the same for all the graphs. I would like to be able to get the max axis value and divide it by 2 to set the baselines right in the middle of each axis.

Example:

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

Is there any way of knowing the max axis values of the graph before drawing the graph?

回答1:

the getColumnRange method works for this...

Returns the minimal and maximal values of values in a specified column. The returned object has properties min and max. If the range has no values, min and max will contain null.

you can also use this information to produce your own axis tick marks.

see following working snippet...

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>

来源：https://stackoverflow.com/questions/38338958/google-charts-get-maximum-scale

标签

javascript

charts

google-visualization

bubble-chart