我正在尝试绘制两个单独的Google图表并让它们共享一个共同的x轴 . 我的想法是,我可以将鼠标悬停在一个图表上,并在正确的日期看到工具提示出现在另一个图表上 .
有点像这样,但有一个工具提示 . focusTarget属性在单个图表上运行良好,而不是两者都适用 .
我想我必须以某种方式创建一个共同的日期列,但我不知道如何去做 .
我的工作(缩写)代码(到目前为止)显示图表 .
var link = function(scope,element,attrs) {
google.charts.setOnLoadCallback(drawUsageChart);
google.charts.setOnLoadCallback(drawChartOne);
function drawChartOne() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sessions');
var sessions = [786, 450, 866, 814, 192, 466, 984, 780, 922, 458, 786, 758, 701, 831, 901, 557, 114, 393, 689, 658, 103, 837, 164, 727, 593, 193, 945, 583, 948, 338];
var start = new Date(1458345600 * 1000);
var date;
var dates = [];
for(var i = 0; i < sessions.length; i++) {
var newDate = start.setDate(start.getDate() + 1);
data.addRow([new Date(newDate), sessions[i]]);
}
var options = {title:'Wot',
height:300,
lineWidth: 1.5,
legend: { position: 'none' },
crosshair: {
trigger: 'both',
orientation: 'vertical'
},
focusTarget: 'category',
};
var chart = new google.visualization.LineChart(document.getElementById('mcs-chart'));
chart.draw(data, options);
}
function drawChartTwo() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Other Sessions');
var sessions = [786, 450, 866, 814, 192, 466, 984, 780, 922, 458, 786, 758, 701, 831, 901, 557, 114, 393, 689, 658, 103, 837, 164, 727, 593, 193, 945, 583, 948, 338];
var start = new Date(1458345600 * 1000);
var date;
var dates = [];
for(var i = 0; i < sessions.length; i++) {
var newDate = start.setDate(start.getDate() + 1);
// dates.push(new Date(newDate));
data.addRow([new Date(newDate), sessions[i]]);
}
var options = {
title:'WOOOOT',
height:300,
lineWidth: 1.5,
legend: { position: 'none' },
crosshair: {
trigger: 'both',
orientation: 'vertical'
},
focusTarget: 'category',
};
var chart = new google.visualization.LineChart(document.getElementById('snr-chart'));
chart.draw(data, options);
}
};
1 回答
尝试使用
google.visualization.events.trigger
同步两个'onmouseover'
事件虽然
'onmouseover'
事件在另一个图表上触发,但工具提示未显示显然,it's not possible to force a tooltip to display
你必须使用数据点的坐标编写自己的
但你可以在
'select'
同步图表扩展问题中的例子......