javascript - 在饼图中自定义工具提示文本

Question

我正在处理饼图，我想自定义当鼠标悬停在饼图上时出现的工具提示。目前，文本显示 50 (50%)，我真的希望它显示 $50 (50%)。在 google charts API 中不清楚如何实现这一点。我该怎么做呢？目前我的 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 图表 API 指定工具提示的示例。

Here's some relevant documentation.

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>