在饼图中自定义工具提示文本

Question

我正在制作饼图，我想自定义鼠标悬停在饼图上时出现的工具提示。目前的文字显示50 (50%)我真的很想说$50 (50%)。谷歌图表API中不清楚如何实现这一点。我该怎么做呢？目前我的JS代码看起来像这样...

google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 

    var data = google.visualization.arrayToDataTable([ 
     ['Effort', 'Amount given'], 
     ['first half',  50], 
     ['second half',  50] 
    ]); 

    var options = { 
     pieHole: 0.5, 
     pieSliceTextStyle: { 
     color: 'black', 
     }, 
     legend: 'none' 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('donut_single')); 
    chart.draw(data, options); 
    } 

JSFiddle

Answer 1

下面是如何指定与谷歌图表API提示的例子。

Here's some relevant documentation.

google.charts.load('current', { 
 
    'packages': ['corechart'] 
 
}); 
 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 

 
    data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Effort'); 
 
    data.addColumn('number', 'Amount given'); 
 
    data.addColumn({type: 'string', role: 'tooltip'}); 
 
    data.addRows([ 
 
    ['first half', 50, "$50 (50%)"], 
 
    ['second half', 50, "$50 (50%)"] 
 
    ]); 
 

 
    var options = { 
 
    pieHole: 0.5, 
 
    pieSliceTextStyle: { 
 
     color: 'black', 
 
    }, 
 
    legend: 'none' 
 
    }; 
 

 
    var chart = new google.visualization.PieChart(document.getElementById('donut_single')); 
 
    chart.draw(data, options); 
 
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="donut_single" style="width: 900px; height: 500px;"></div>