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

Question

我正在制作饼图，我想自定义当鼠标悬停在饼图上时出现的工具提示。目前，文本显示 50 (50%)，而我真正希望它显示 (50%)。 google 图表 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%)"],
    ['second half', 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>

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

Customizing Tooltip Text In Pie Chart

javascript

charts

google-visualization

pie-chart

google-pie-chart