web-dev-qa-db-ja.com

GoogleVisualizationツールチップにカスタムテキストを追加する

（面グラフに）表示している各ツールチップに別のテキスト行を追加する必要があります。私がやりたいことを説明するためにスクリーンショットを含めました。

私の現在のチャート：  追加のテキストが追加されたグラフ。 （これは私がやろうとしていることです）： enter image description here

カスタムツールチップにサードパーティのJSを使用せずにこれを実行したいと思っています。デフォルトのツールチップに表示されるテキストベースのコンテンツの別の行を追加する方法はありますか？

どんな助けでも大歓迎です。

tooltipgoogle-visualization
13
Jeremy

ご覧ください https://developers.google.com/chart/interactive/docs/roles#whatrolesavailable ：

追加のツールチップ行はあなたが探しているものです！

例：

 label： 'Year'、 'Sales'、null、 'Expenses'、null 
 role：domain、data、tooltip、data、tooltip 
 '2004'、1000、 ' 100万ドルの売上、400、「2004年の$ 0.4Mの費用
」2004年の「
」「2005」、1170、「117万ドルの売上、460、「$ 46万の費用
」 2005'in 2005 '
' 2006 '、660、'。66 $売上高、1120、 '$ 112万経費
 in 2006'in 2006' 
 '2007'、1030、 '103万ドルの売上、540、' 2007年の$ 54万の費用
 '2007年の'
10
Jonathan Heinen

オプションで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);
  }
6
Todor

デフォルトのツールチップに別のデータ行を追加する方法が見つかりませんでした。 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;
}
4
Adam Youngers