格式化餅圖工具提示

我有一個包含各種值的餅圖。將鼠標懸停在餅圖的一個切片上時，會顯示該值。我想讓這個值顯示一個百分比。例如，我希望11成爲11％。懸停在切片上時是否可以向所有值添加百分比符號？這是我的jsFiddle。格式化餅圖工具提示

HTML

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

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

來源

2017-07-31 user2896120

工具提示將默認

格式繪製圖表之前對數據表列中顯示的行的格式化值...

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>

來源

2017-07-31 16:31:13 WhiteHat

這工作，但它向上舍小數。如何在小數點後顯示2個地方？ – user2896120

謝謝！我只需將fractionDigits更改爲2即可運行 – user2896120

想了解你的使用情況，但這個工程。谷歌可視化允許您爲每個數據點添加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>

來源

2017-07-31 16:26:57 Triptych

格式化餅圖工具提示

回答

相關問題