我用Google图表combochart组合做了一个小图 带折线图的堆积条形图。
工具提示出现在由触发的折线图的所有堆栈和点上 鼠标动作:'焦点' (鼠标在目标上),'选择' (点击)和'两者都是'点击和焦点。
我希望在点击,触发后显示折线图中的所有工具提示:设置为'选择'和焦点在区域后的堆积条形图中的所有工具提示,触发:设置为'焦点'。谷歌图表是否可以在同一图表中设置不同的工具提示行为?我该如何开发?
在这里播放我的例子: https://jsfiddle.net/machesne/xf1kccdq/
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);
function drawStacked() {
var tooltipdata = [["Apples detail: ","Tomatoes detail: ", "Oranges detail : ", "Strawberries detail : "],["Apples detail: ","Tomatoes detail: ", "Oranges detail : ", "Strawberries detail : "],["Apples detail: ","Tomatoes detail: ", "Oranges detail : ", "Strawberries detail : "]]
var valuedata = [[50, 10, 15, 15, 90, 90],[50, 12, 15, 15, 92, 92],[60, 10, 15, 15, 100, 100]];
var data = google.visualization.arrayToDataTable([
['Date', 'Apples', { role: 'tooltip' }, 'Tomatoes', { role: 'tooltip' }, 'Orange', { role: 'tooltip' }, 'Strawberries', { role: 'tooltip' }, { role: 'annotation' }, 'Sum' , { role: 'tooltip' }],
['', valuedata[0][0], tooltipdata[0][0], valuedata[0][1], tooltipdata[0][1], valuedata[0][2], tooltipdata[0][2], valuedata[0][3], tooltipdata[0][3], valuedata[0][4],valuedata[0][5], tooltipdata[0][4]],
['', valuedata[1][0], tooltipdata[1][0], valuedata[1][1], tooltipdata[1][1], valuedata[1][2], tooltipdata[1][2], valuedata[1][3], tooltipdata[1][3], valuedata[1][4],valuedata[1][5], tooltipdata[1][4]],
['', valuedata[2][0], tooltipdata[2][0], valuedata[2][1], tooltipdata[2][1], valuedata[2][2], tooltipdata[2][2], valuedata[2][3], tooltipdata[2][3], valuedata[2][4],valuedata[2][5], tooltipdata[2][4]], ]);
var options = {
width: 1200,
height: 1000,
legend: { position: 'bottom', maxLines: 2 },
seriesType: 'bars',
bar: { groupWidth: '90%' },
isStacked: true,
tooltip: { isHtml: true, trigger: 'both' }, // CSS styling affects only HTML tooltips.
series: {4: {type: 'line', pointSize: 15 } }
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
非常感谢您的回答!