我想添加鼠标滚动缩放,但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>
答案 0 :(得分:1)
我为options的ChartWrapper添加explorer
取得了一些成功。鼠标滚动现在缩放图表,但它不会更新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() {});
}
&#13;
#chart_div {
width: 100%;
height: 100%;
}
&#13;
<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>
&#13;