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

对您的用例感到好奇，但这很有效。 Google可视化允许您为每个数据点添加page。

      google.load("visualization", "1", {
        packages: ["corechart"]
      });
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
            data.addColumn('string', 'Task');
            data.addColumn('number', 'Hours per Day')
            data.addColumn({type:'string', role:'tooltip'})
            data.addRows([
              ['Work', 11, '11%'],
              ['Eat', 2, '2%'],
              ['Commute', 2, '2%'],
              ['Watch TV', 2, '2%'],
              ['Sleep', 7, '7%']
            ]);
       
        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.google.com/jsapi?fake=.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Answer 2

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

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

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

请参阅以下工作代码段...

＆＃13;

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);
}

＆＃13;

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

＆＃13;

格式化饼图的工具提示

2 个答案: