javascript - 格式化饼图的工具提示

Question

我有一个包含各种值的饼图。将鼠标悬停在饼图的一部分上时，会显示该值。我想让这个值显示一个百分比。例如，我希望 11 为 11%。将鼠标悬停在切片上时是否可以为所有值添加百分比符号？这是我的 jsFiddle .

HTML

<div id="chart_div" style="width: 900px; height: 500px;"></div>

JS

  google.load("visualization", "1", {
    packages: ["corechart"]
  });
  google.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work', 11],
      ['Eat', 2],
      ['Commute', 2],
      ['Watch TV', 2],
      ['Sleep', 7]
    ]);

    var options = {
      title: 'My Daily Activities',
      tooltip: {
        text: 'value'
      }
    };

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

Answer 1

工具提示默认会显示行的格式化值

在绘制图表前格式化数据表列...

var formatNumber = new google.visualization.NumberFormat({
  suffix: '%',
  fractionDigits: 0
});
formatNumber.format(data, 1);

请参阅以下工作片段...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);

  var formatNumber = new google.visualization.NumberFormat({
    suffix: '%',
    fractionDigits: 0
  });
  formatNumber.format(data, 1);

  var options = {
    title: 'My Daily Activities',
    tooltip: {
      text: 'value'
    }
  };

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>