대시 보드 차트에서 마우스 스크롤 줌이 작동하지 않습니다.

Question

마우스 스크롤 확대/축소를 추가하고 싶지만 explorer 기능이 차트 옵션에서 작동하지 않는 것 같습니다. 차트를 확대하기 위해 마우스 스크롤을 어떻게 얻을 수 있습니까? 나는 ChartWrapper의 options에 explorer을 추가하여 어느 정도 성공했다

google.load('visualization', '1', { 
 
    packages: ['controls', 'charteditor'] 
 
}); 
 
google.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'X'); 
 
    data.addColumn('number', 'Y1'); 
 
    data.addColumn('number', 'Y2'); 
 

 

 
    var data1 = 5; 
 
    var data2 = 100; 
 
    for (var i = 0; i < 1000; i++) { 
 
    data.addRows([ 
 
     [i, i + data1, i + data2] 
 

 
    ]); 
 
    } 
 

 
    var dash = new google.visualization.Dashboard(document.getElementById('dashboard')); 
 

 
    var control = new google.visualization.ControlWrapper({ 
 
    controlType: 'ChartRangeFilter', 
 
    containerId: 'control_div', 
 
    options: { 
 
     title: 'Průběh tlaku v čase', 
 
     hAxis: { 
 
     title: 'Čas', 
 
     titleTextStyle: { 
 
      color: '#333' 
 
     }, 
 
     slantedText: true, 
 
     slantedTextAngle: 80 
 
     }, 
 
     filterColumnIndex: 0, 
 
     ui: { 
 
     chartOptions: { 
 
      height: 40, 
 
      width: 600, 
 
      chartArea: { 
 
      width: '90%' 
 
      } 
 
     } 
 
     }, 
 
     colors: ['#D44E41'] 
 
    } 
 

 
    }); 
 

 
    var chart = new google.visualization.ChartWrapper({ 
 
    chartType: 'LineChart', 
 
    containerId: 'chart_div', 
 

 
    }); 
 

 
    function setOptions(wrapper) { 
 
    wrapper.setOption('width', 600); 
 
    } 
 

 
    dash.bind([control], [chart]); 
 
    dash.draw(data); 
 
    google.visualization.events.addListener(control, 'statechange', function() {}); 
 
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<div id="dashboard"></div> 
 
<div id="chart_div" style="width: 100%; height: 100%;"></div> 
 
<div id="control_div"></div>

View at JSFiddle

Answer 1

:

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

여기 내 차트입니다. 이제 마우스 스크롤로 차트가 확대되었지만 ChartRangeFilter 디스플레이는 업데이트되지 않습니다. 마우스가 차트와 범위 필터를 동시에 확대하여 동기화 할 수 있다면 좋을 것입니다. 이미이 [ChartRangeFilter] (https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter) 확대하기 위해 노력하고있어 같은

google.load('visualization', '1', { 
 
    packages: ['controls', 'charteditor'] 
 
}); 
 
google.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'X'); 
 
    data.addColumn('number', 'Y1'); 
 
    data.addColumn('number', 'Y2'); 
 

 

 
    var data1 = 5; 
 
    var data2 = 100; 
 
    for (var i = 0; i < 1000; i++) { 
 
    data.addRows([ 
 
     [i, i + data1, i + data2] 
 

 
    ]); 
 
    } 
 

 
    var dash = new google.visualization.Dashboard(document.getElementById('dashboard')); 
 

 
    var control = new google.visualization.ControlWrapper({ 
 
    controlType: 'ChartRangeFilter', 
 
    containerId: 'control_div', 
 
    options: { 
 
     title: 'Průběh tlaku v čase', 
 
     hAxis: { 
 
     title: 'Čas', 
 
     titleTextStyle: { 
 
      color: '#333' 
 
     }, 
 
     slantedText: true, 
 
     slantedTextAngle: 80 
 
     }, 
 
     filterColumnIndex: 0, 
 
     ui: { 
 
     chartOptions: { 
 
      height: 40, 
 
      width: 600, 
 
      chartArea: { 
 
      width: '90%' 
 
      } 
 
     } 
 
     }, 
 
     colors: ['#D44E41'] 
 
    } 
 

 
    }); 
 

 
    var chart = new google.visualization.ChartWrapper({ 
 
    chartType: 'LineChart', 
 
    containerId: 'chart_div', 
 
    options: { 
 
     explorer: { 
 
     axis: 'horizontal', 
 
     keepInBounds: true, 
 
     maxZoomIn: 4.0 
 
     } 
 
    } 
 
    }); 
 

 
    function setOptions(wrapper) { 
 
    wrapper.setOption('width', 600); 
 
    } 
 

 
    dash.bind([control], [chart]); 
 
    dash.draw(data); 
 
    google.visualization.events.addListener(control, 'statechange', function() {}); 
 
}

#chart_div { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<div id="dashboard"></div> 
 
<div id="chart_div"></div> 
 
<div id="control_div"></div>