円グラフのツールチップの書式設定

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>

Answer 2

が、これは動作します。 Googleの視覚化では、データポイントごとにcustom labelsを追加することができます。

 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>