Настройка текста всплывающей подсказки в круговой диаграмме

Question

Я работаю над круговой диаграммой и хочу настроить всплывающую подсказку, которая появляется, когда мышь наводит курсор на круговую диаграмму. В настоящее время текст показывает 50 (50%) где я действительно хочу это сказать $50 (50%), В API карт Google не ясно, как этого добиться. Как мне это сделать? В настоящее время мой код JS выглядит следующим образом...

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

    var data = google.visualization.arrayToDataTable([
      ['Effort', 'Amount given'],
      ['first half',     50],
      ['second half',     50]
    ]);

    var options = {
      pieHole: 0.5,
      pieSliceTextStyle: {
        color: 'black',
      },
      legend: 'none'
    };

    var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
    chart.draw(data, options);
  }

JSFiddle

Answer 1

Вот пример того, как указать всплывающие подсказки с помощью Google charts API.

Вот некоторые соответствующие документы.

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

function drawChart() {

  data = new google.visualization.DataTable();
  data.addColumn('string', 'Effort');
  data.addColumn('number', 'Amount given');
  data.addColumn({type: 'string', role: 'tooltip'});
  data.addRows([
    ['first half', 50, "$50 (50%)"],
    ['second half', 50, "$50 (50%)"]
  ]);

  var options = {
    pieHole: 0.5,
    pieSliceTextStyle: {
      color: 'black',
    },
    legend: 'none'
  };

  var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_single" style="width: 900px; height: 500px;"></div>