将自定义文本添加到Google Visualization工具提示

Question

我需要在我正在显示的每个工具提示上添加另一行文本(在面积图上).我已经包含了一个截图来说明我希望做的事情.

我目前的图表: 添加了附加文本的图表.(这就是我想要做的):

我希望这样做而不必使用第三方JS进行自定义工具提示.有没有办法只添加另一行基于文本的内容以显示在默认工具提示中？

任何帮助是极大的赞赏.

Answer 1

请查看https://developers.google.com/chart/interactive/docs/roles#whatrolesavailable:

您正在寻找额外的工具提示行!

这个例子:

label: 'Year',   'Sales',    null,   'Expenses',    null
 role: domain,     data,    tooltip,    data,      tooltip    
        '2004',    1000, '1M$ sales,     400,    '$0.4M expenses
                           in 2004'                  in 2004'
        '2005',    1170, '1.17M$ sales,  460,    '$0.46M expenses
                            in 2005'                  in 2005'
        '2006',     660, '.66$ sales,   1120,     '$1.12M expenses
                            in 2006'                 in 2006'
        '2007',    1030, '1.03M$ sales,  540,    '$0.54M expenses
                            in 2007'                  in 2007'

Answer 2

如果focusTarget: 'category'在选项中启用。然后该tooltip列成为value当前x,y点的工具提示（按照您想要的方式呈现）。因此，您可以模仿value并添加所需的附加文本。这是我的意思的一个例子：-

  google.setOnLoadCallback(drawChart);

  function drawChart() {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'Year');
    dataTable.addColumn('number', 'Sales');
    // A column for custom tooltip content
    dataTable.addColumn({type: 'string', role: 'tooltip'});
    dataTable.addRows([
      ['2010', 600,'600: 15% growth'],
      ['2011', 1500, '1500: 50% growth'],
      ['2012', 800, '800: -40% growth'],
      ['2013', 1000, '1000: 25% growth']
    ]);

    var options = { legend: 'none', focusTarget: 'category'};
    var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_custom_tooltip'));
    chart.draw(dataTable, options);
  }

Answer 3

我还没有找到将另一个数据行添加到默认工具提示的方法。您可以使用 HTML 工具提示接近您正在寻找的内容。不过，您确实丢失了工具提示上的尾部。这是我使用的解决方案的 JSbin... http://jsbin.com/tovizukabu/3/edit?css,js,output

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'Year');
    dataTable.addColumn('number', 'Sales');
    dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
    dataTable.addColumn('number', 'Expense');
    dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});

    dataTable.addRows([
      ['2010', 1500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 600,'<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$600</strong></div>'],
      ['2011', 500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 1500, '<div><strong>2011</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$1,500</strong></div>'],
      ['2012', 1200, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 800, '<div><strong>2012</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$800</strong></div>'],
      ['2013', 500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 1000, '<div><strong>2013</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$1,000</strong></div>']
    ]);

    var options = {tooltip: {isHtml: true}};
    var chart = new google.visualization.AreaChart (document.getElementById('tooltip_action'));
    chart.draw(dataTable, options);
  }

和CSS...

.google-visualization-tooltip {
border: solid 1px #bdbdbd;
border-radius: 2px;
background-color: white;
position: absolute;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6);
font-size: 11px;
-moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6);
font-family: arial;
}

.google-visualization-tooltip div {
  padding:5px;
}