格式化饼图工具提示

我有一个包含各种值的饼图。将鼠标悬停在饼图的一个切片上时，会显示该值。我想让这个值显示一个百分比。例如，我希望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

格式化饼图工具提示

回答

相关问题