鼠標滾動縮放無法在儀表板圖表上工作

Question

我想添加鼠標滾動縮放，但explorer函數在圖表選項中似乎不起作用。我怎樣才能讓鼠標滾動來放大圖表？

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

這裏是我的圖表：

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到options爲ChartWrapper取得了一些成功。鼠標滾動現在可以縮放圖表，但不會更新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>