Google Chart API의 실제 vAxis 최대 값을 얻는 방법은 무엇입니까?

Question

나는 두 개의 라인 차트가 각 내가이 개 차트의 규모를 동기화 할

(하나의 here. 같이) rangeFilter 있습니다. 즉, 하나의 차트가 범위보기를 변경하면 vAxis max value이 해당 범위의 최대 데이터에 맞게 변경되며 다른 차트가 동일한 값으로 배율을 변경하기를 원합니다.

vAxis.viewWindow.max은 어떻게 실시간으로으로받을 수 있습니까? 그냥 vAxis.viewWindow.min (및 .max) 값을 결정하는 방법을 요구하는 경우

Answer 1

, 다음과 같은 코드로 작업을 수행 할 수 있습니다

( chart라는 이름의 차트 래퍼 객체를 지정해)

alert('Min ViewWindow: ' + chart.getOption('vAxis.viewWindow.min') + ', Max: ' + chart.getOption('vAxis.viewWindow.max')); 

. , 그냥보고

google.visualization.events.addListener(control, 'statechange', function(e) { 
    if(e.inProgress == false) { 
     alert('Min ViewWindow: ' + chart.getOption('vAxis.viewWindow.min') + ', Max: ' + chart.getOption('vAxis.viewWindow.max')); 
    } 

이 실제로 아무것도 변경되지 않습니다, 마음 :

당신은 최대/최소 당신에게 당신이 제어 래퍼에 stateChange 이벤트를 추가하여 차트를 조정할 때마다 말할 수 있습니다 당신이 원하는.

function drawVisualization() { 
    var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard')); 

    var control = new google.visualization.ControlWrapper({ 
    'controlType': 'ChartRangeFilter', 
    'containerId': 'control', 
    'options': { 
     // Filter by the date axis. 
     'filterColumnIndex': 0, 
     'ui': { 
     'chartType': 'LineChart', 
     'chartOptions': { 
      'chartArea': {'width': '90%'}, 
      'hAxis': {'baselineColor': 'none'} 
     }, 
     // Display a single series that shows the closing value of the stock. 
     // Thus, this view has two columns: the date (axis) and the stock value (line series). 
     'chartView': { 
      'columns': [0, 3] 
     }, 
     // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000 
     'minRangeSize': 86400000 
     } 
    }, 
    // Initial range: 2012-02-09 to 2012-03-20. 
    'state': {'range': {'start': new Date(2012, 1, 9), 'end': new Date(2012, 2, 20)}} 
    }); 

    var chart = new google.visualization.ChartWrapper({ 
    'chartType': 'CandlestickChart', 
    'containerId': 'chart', 
    'options': { 
     // Use the same chart area width as the control for axis alignment. 
     'chartArea': {'height': '80%', 'width': '90%'}, 
     'hAxis': {'slantedText': false}, 
     'vAxis': {'viewWindow': {'min': 0, 'max': 2000}}, 
     'legend': {'position': 'none'} 
    }, 
    // Convert the first column from 'date' to 'string'. 
    'view': { 
     'columns': [ 
     { 
      'calc': function(dataTable, rowIndex) { 
      return dataTable.getFormattedValue(rowIndex, 0); 
      }, 
      'type': 'string' 
     }, 1, 2, 3, 4] 
    } 
    }); 

    var data = new google.visualization.DataTable(); 
    data.addColumn('date', 'Date'); 
    data.addColumn('number', 'Stock low'); 
    data.addColumn('number', 'Stock open'); 
    data.addColumn('number', 'Stock close'); 
    data.addColumn('number', 'Stock high'); 

    // Create random stock values, just like it works in reality. 
    var open, close = 300; 
    var low, high; 
    for (var day = 1; day < 121; ++day) { 
    var change = (Math.sin(day/2.5 + Math.PI) + Math.sin(day/3) - Math.cos(day * 0.7)) * 150; 
    change = change >= 0 ? change + 10 : change - 10; 
    open = close; 
    close = Math.max(50, open + change); 
    low = Math.min(open, close) - (Math.cos(day * 1.7) + 1) * 15; 
    low = Math.max(0, low); 
    high = Math.max(open, close) + (Math.cos(day * 1.3) + 1) * 15; 
    var date = new Date(2012, 0 ,day); 
    data.addRow([date, Math.round(low), Math.round(open), Math.round(close), Math.round(high)]); 
    } 

    // This function determines the maximum and minimum values of the data 

    function calculateMinMax(data) { 
    // Get max and min values for the data table 

    var totalMin = data.getValue(0,1); 
    var totalMax = data.getValue(0,1); 

    for (var i = 1;i < data.getNumberOfColumns();i++) { 
     for (var j = 0;j < data.getNumberOfRows();j++){ 
     if (data.getValue(j, i) < totalMin) { 
      totalMin = data.getValue(j, i); 
     }   
     if (data.getValue(j, i) > totalMax) { 
      totalMax = data.getValue(j, i); 
     } 
     } 
    } 

    // Calculate grid line axes and min/max settings 

    // Figure out the largest number (positive or negative) 
    var biggestNumber = Math.max(Math.abs(totalMax),Math.abs(totalMin)); 

    // Round to an exponent of 10 appropriate for the biggest number 
    var roundingExp = Math.floor(Math.log(biggestNumber)/Math.LN10); 
    var roundingDec = Math.pow(10,roundingExp); 

    // Round your max and min to the nearest exponent of 10 
    var newMax = Math.ceil(totalMax/roundingDec)*roundingDec; 
    var newMin = Math.floor(totalMin/roundingDec)*roundingDec; 

    // Determine the range of your values 
    var range = newMax - newMin; 

    // Define the number of gridlines (default 5) 
    var gridlines = 5; 

    // Determine an appropriate gap between gridlines 
    var interval = range/(gridlines - 1); 

    // Round that interval up to the exponent of 10 
    var newInterval = Math.ceil(interval/roundingDec)*roundingDec; 

    // Re-round your max and min to the new interval 
    var finalMax = Math.ceil(totalMax/newInterval)*newInterval; 
    var finalMin = Math.floor(totalMin/newInterval)*newInterval; 

    var result = [finalMin, finalMax]; 

    return result; 
    } 

    var axisMinMax = calculateMinMax(data); 

    alert('Min: ' + axisMinMax[0] + ', Max: ' + axisMinMax[1]); 

    chart.setOption('vAxis.viewWindow.min', axisMinMax[0]); 
    chart.setOption('vAxis.viewWindow.max', axisMinMax[1]); 

    dashboard.bind(control, chart); 
    dashboard.draw(data); 
    google.visualization.events.addListener(control, 'statechange', function(e) { 
    if(e.inProgress == false) { 
     var axisMinMax = calculateMinMax(chart.getDataTable()); 
     chart.setOption('vAxis.viewWindow.min', axisMinMax[0]); 
     chart.setOption('vAxis.viewWindow.max', axisMinMax[1]); 
     var filteredData = chart.getDataTable(); 
     chart.draw(filteredData); 
    } 
    }); 
} 

Answer 2

내가, 당신의 차트에 대한 자세한 세부 사항을 모른 채 : 당신이 차트는 차트에서 필터링 된 값에 따라 최대/최소 viewWindow 값을 변경하려면 다른 한편으로, 여기에 내 매우 가난 구현이 켜져있는 경우 매우 구체적인 답변을 드릴 수는 없지만 대시 보드에서 두 개의 컨트롤 (각각 control1 및 control2)에 의해 구동되는 두 개의 차트 (chart1 및 chart2)가 있고 각각의 차트에는 각각 하나의 데이터 시리즈가있는 경우 무언가를 사용할 수 있습니다 다음과 같이 비늘을 동기화하십시오.

function syncChartScales() { 
    var range1 = chart1.getDataTable().getColumnRange(1); 
    var range2 = chart2.getDataTable().getColumnRange(1); 

    var minMax = { 
     min: Math.min(range1.min, range2.min), 
     max: Math.max(range1.max, range2.max) 
    } 

    chart1.setOption('vAxis.minValue', minMax.min); 
    chart1.setOption('vAxis.maxValue', minMax.max); 
    chart2.setOption('vAxis.minValue', minMax.min); 
    chart2.setOption('vAxis.maxValue', minMax.max); 

    chart1.draw(); 
    chart2.draw(); 
} 

google.visualization.events.addListener(control1, 'statechange', syncChartScales); 
google.visualization.events.addListener(control2, 'statechange', syncChartScales); 

더 많은 데이터 시리즈를 만든 다음 두 차트의 모든 데이터 시리즈의 범위를 모두 구해야 모든 차트의 최소/최대 값을 구해야하고 두 차트의 vAxis.minValue/maxValue 옵션을 모두 최소/최대 값으로 설정해야하므로 약간 더 복잡해집니다 시리즈.

Answer 3

여기에 원래의 질문이 무엇을 요구하는 작업을 수행하는 방법은 다음과 같습니다

chartWrapper.draw(); // initial draw of the chart 
var chart = chartWrapper.getChart(); 
var cli = chart.getChartLayoutInterface(); 
var bb = cli.getChartAreaBoundingBox(); 
var vAxisMax = cli.getVAxisValue(bb.top); 

참조 : 토론 Google Groups: Google Visualization API합니다.