2016-07-12 3 views
1

Я пытаюсь сделать все положительную пузырьковую диаграмму имеет квадрант рисуя квадрант с использованием базового свойства следующим образом:Google Charts Получить максимальный масштаб

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, чтобы установить базовые линии прямо посередине каждой оси.

Пример:

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

Есть ли способ знать максимальные значения оси графика перед нанесением на график?

+0

Да, петля через 'коллекции dataT' найти наибольшее значение. – Malk

ответ

1

метод getColumnRange работает для этого ...

Возвращает минимальные и максимальные значения величин в указанном столбце. Возвращаемый объект имеет свойства min и max. Если диапазон не имеет значений, min и max будут содержать нуль.

Вы также можете использовать эту информацию для создания собственных меток по оси.

см следующий рабочий фрагмент кода ...

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>

+0

У меня тоже было это, но мне пришлось бы округлить максимальные числа, чтобы я мог получить его точно посередине, так как ось всегда проходит мимо максимальных чисел. Так как масштаб оси также отличается на разных графиках, маршрут, к которому я собираюсь перейти, - это множество утверждений if, чтобы попытаться угадать масштаб до максимального значения. – clue3434

+0

, а не _try, чтобы угадать масштаб_ - предоставить свои собственные отметки по типу оси - см. Измененный ответ выше ... – WhiteHat