如何在同一个Combochart中为多个工具提示设置不同的触发器属性

时间:2017-04-05 09:46:03

标签: javascript triggers tooltip stacked-chart

我用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);
}

非常感谢您的回答!

0 个答案:

没有答案