代码之家  ›  专栏  ›  技术社区  ›  sswwqqaa

在Google可视化图表API中仅显示百分比

  •  2
  • sswwqqaa  · 技术社区  · 6 年前

    是否可以在谷歌可视化图表API中只显示百分比?

    我在里面什么都找不到 docs

    我有 pieSliceText: 'percentage' ,但我也只想在悬停时显示百分比。 enter image description here

    1 回复  |  直到 6 年前
        1
  •  1
  •   WhiteHat    6 年前

    您可以提供自己的自定义工具提示

    在这里, group 方法用于查找所有行的合计…

      var total = google.visualization.data.group(
        data,
        [{column: 0, modifier: function () {return 'total'}, type:'string'}],
        [{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
      );
    

    然后使用数据视图添加工具提示列,计算百分比…

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1, {
        type: 'string',
        role: 'tooltip',
        calc: function (dt, row) {
          var percent = (dt.getValue(row, 1) / total.getValue(0, 1)) * 100;
          return '<div class="tooltip">' + dt.getValue(row, 0) + ':&nbsp;<span>' + percent.toFixed(1) + '%</span>';
        },
        p: {html: true}
      }]);
    

    请参阅以下工作代码段…

    google.charts.load('current', {'packages':['corechart']});
    google.charts.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',
        pieSliceText: 'percentage',
        tooltip: {
          isHtml: true
        }
      };
    
      var total = google.visualization.data.group(
        data,
        [{column: 0, modifier: function () {return 'total'}, type:'string'}],
        [{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
      );
    
      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1, {
        type: 'string',
        role: 'tooltip',
        calc: function (dt, row) {
          var percent = (dt.getValue(row, 1) / total.getValue(0, 1)) * 100;
          return '<div class="tooltip">' + dt.getValue(row, 0) + ':&nbsp;<span>' + percent.toFixed(1) + '%</span>';
        },
        p: {html: true}
      }]);
    
      var chart = new google.visualization.PieChart(document.getElementById('piechart'));
      chart.draw(view.toDataTable(), options);
    }
    .tooltip {
      font-size: 12pt;
      padding: 6px;
    }
    
    .tooltip span {
      font-weight: bold;
    }
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="piechart"></div>