Увеличить Google График

Я пытаюсь создать линейную диаграмму с API визуализации Google. Я хочу включить масштабирование. Documents говорят, что опция «исследователь» полезна. Но когда я пытаюсь использовать опцию 'explorer', диаграмма отображается, но масштаб не работает.Увеличить Google График

Это мой код:

function drawVisualization(dataValues) { 
var data = new window.google.visualization.DataTable(); 
data.addColumn('date', 'Date'); 
data.addColumn('number', 'Count'); 

for (var i = 0; i < dataValues.length; i++) { 
    data.addRow([new Date(dataValues[i].Year, dataValues[i].Month-1, dataValues[i].Day), dataValues[i].Count]); 
} 

var formatter_short = new google.visualization.DateFormat({ formatType: 'short' }); 
formatter_short.format(data, 0); 
var options = { 
    title: "Time statistics", 
    explorer: { maxZoomOut: 8 } 
}; 
var chart = new google.visualization.LineChart(document.getElementById('date')); 
chart.draw(data, options); 
}

Как я могу решить эту проблему и сделать линию диаграммы масштабируемой?

источник

2013-12-24 alinaish

В API используется известная ошибка при использовании опции explorer с осью типа даты. Команда разработчиков работает над решением. – asgallant

похоже, что сейчас работает с LineChart и ColumnChart (хотя этот документ не задокументирован).

var options = { 
    explorer: { 
     maxZoomOut:2, 
     keepInBounds: true 
    } 
};

http://jsfiddle.net/duJA8/

источник

2014-02-24 12:24:06

Также это работает с диаграммами рассеяния. Кроме того, насколько я знаю, эти функции НЕ работают, если у вас есть какое-либо масштабирование журнала по осям. –

Привет, это не работает для меня. Пожалуйста, помогите его срочно. –

Вот как я получил зум с функцией dragToZoom исследователь

explorer: { 
     actions: ['dragToZoom', 'rightClickToReset'], 
     axis: 'horizontal', 
     keepInBounds: true, 
     maxZoomIn: 4.0 
}

скрипка здесь https://jsfiddle.net/4w626v2s/2/

также просто позволяет ему увеличить прокруткой

explorer: { 
     axis: 'horizontal', 
     keepInBounds: true, 
     maxZoomIn: 4.0 
}

скрипка для прокрутки, чтобы увеличить здесь https://jsfiddle.net/5h7jxqq8/2/

источник

2016-04-13 10:51:37

. Привет, это не работает для меня. Пожалуйста, помогите его срочно. –

@HarrySharma вы можете объяснить, как вы его использовали? –

я попытался использовать его на диаграмме Ганта не линия диаграммы –

Попробуйте это:

<html> 
 
\t <head> 
 
\t \t <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
\t \t <script type="text/javascript"> 
 
\t \t \t google.charts.load('current', { 
 
\t \t \t \t callback: function() { 
 
\t \t \t \t \t drawChart(); 
 
\t \t \t \t \t window.addEventListener('resize', drawChart, false); 
 
\t \t \t \t }, 
 
\t \t \t \t packages:['corechart'] 
 
\t \t \t }); 
 

 
\t \t \t function drawChart() { 
 
\t \t \t \t var data = google.visualization.arrayToDataTable([ 
 
\t \t \t \t \t ['Year', 'Sales', 'Expenses', 'Profit'], 
 
\t \t \t \t \t ['2014', 1000, 400, 200], 
 
\t \t \t \t \t ['2015', 1170, 460, 250], 
 
\t \t \t \t \t ['2016', 660, 1120, 300], 
 
\t \t \t \t \t ['2017', 1030, 540, 350] 
 
\t \t \t \t ]); 
 

 
\t \t \t \t var options = { 
 
\t \t \t \t \t animation:{ 
 
\t \t \t \t \t \t duration: 1000, 
 
\t \t \t \t \t \t easing: 'linear', 
 
\t \t \t \t \t \t startup: true 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t height: 600, 
 
\t \t \t \t \t width: window.innerWidth, 
 
\t \t \t \t \t theme: 'material', 
 
\t \t \t \t \t title: 'Company Performance' 
 
\t \t \t \t }; 
 

 
\t \t \t \t var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material')); 
 
\t \t \t \t chart.draw(data, options); 
 
\t \t \t } 
 
\t \t </script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="columnchart_material" style="height: 500px; "></div> 
 
\t </body> 
 
</html>

Если вы хотите установить ширину и высоту в соответствии с экрана. Таким образом, вы можете добиться этого с помощью «innerWidth» и «innerHeight», как показано ниже:

<html> 
 
\t <head> 
 
\t \t <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
\t \t <script type="text/javascript"> 
 
\t \t \t google.charts.load('current', { 
 
\t \t \t \t callback: function() { 
 
\t \t \t \t \t drawChart(); 
 
\t \t \t \t \t window.addEventListener('resize', drawChart, false); 
 
\t \t \t \t }, 
 
\t \t \t \t packages:['corechart'] 
 
\t \t \t }); 
 

 
\t \t \t function drawChart() { 
 
\t \t \t \t var data = google.visualization.arrayToDataTable([ 
 
\t \t \t \t \t ['Year', 'Sales', 'Expenses', 'Profit'], 
 
\t \t \t \t \t ['2014', 1000, 400, 200], 
 
\t \t \t \t \t ['2015', 1170, 460, 250], 
 
\t \t \t \t \t ['2016', 660, 1120, 300], 
 
\t \t \t \t \t ['2017', 1030, 540, 350] 
 
\t \t \t \t ]); 
 

 
\t \t \t \t var options = { 
 
\t \t \t \t \t animation:{ 
 
\t \t \t \t \t \t duration: 1000, 
 
\t \t \t \t \t \t easing: 'linear', 
 
\t \t \t \t \t \t startup: true 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t height: window.innerHeight, 
 
\t \t \t \t \t width: window.innerWidth, 
 
\t \t \t \t \t theme: 'material', 
 
\t \t \t \t \t title: 'Company Performance' 
 
\t \t \t \t }; 
 

 
\t \t \t \t var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material')); 
 
\t \t \t \t chart.draw(data, options); 
 
\t \t \t } 
 
\t \t </script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="columnchart_material"></div> 
 
\t </body> 
 
</html>

Я надеюсь, что это поможет вам решить эту проблему.

источник

2017-03-17 07:09:22

Увеличить Google График

ответ

Смежные вопросы