Google Charts获得最大规模

问题描述

我正在尝试通过使用基线属性绘制象限来使所有正气泡图具有象限，如下所示:

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

除了图形会根据查询不断变化之外，因此所有图形的基线都不会相同.我希望能够获得最大轴值并将其除以2，以在每个轴的中间设置基线.

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.

示例:

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?

推荐答案

getColumnRange 方法适用于此...

the getColumnRange method works for this...

您还可以使用此信息生成自己的轴刻度线.

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>

这篇关于Google Charts获得最大规模的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！