Javascript 如何更改谷歌图表 api 的工具提示文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6013053/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change tooltip text for google chart api?
提问by Adam Ramadhan
http://code.google.com/apis/chart/
http://code.google.com/apis/chart/
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'date');
data.addColumn('number', 'Views');
data.addColumn('number', 'People');
data.addRows([
<?php echo $analytics; ?>
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.AreaChart(document.getElementById('Analytics-Visualization'));
chart.draw(data, {lineWidth:3, pointSize:8, width: 745, height: 240,chartArea:{left:20,top:20,width:640}});
}
</script>
lets say when we do this it does this
让我们说当我们这样做时它会这样做
to
到
maybe using the listener stuff ?
也许使用听众的东西？
回答by minaz
For custom tooltips, add the tooltip as an extra column:
对于自定义工具提示，将工具提示添加为额外的列：
function drawVisualization() {
data = new google.visualization.DataTable()
data.addColumn('string', 'Date');
data.addColumn('number');
data.addColumn({type:'string',role:'tooltip'});
data.addRow();
base = 10;
data.setValue(0, 0, 'Datapoint1');
data.setValue(0, 1, base++);
data.setValue(0, 2, " This is my tooltip1 ");
data.addRow();
data.setValue(1, 0, 'Datapoint2');
data.setValue(1, 1, base++);
data.setValue(1, 2, "This is my second tooltip2");
// Draw the chart.
var chart = new google.visualization.BarChart(document.getElementById('visualization'));
chart.draw(data, {legend:'none', width:600, height:400});
}
回答by sandeep
@Adam; If you want to edit text then check this http://code.google.com/apis/ajax/playground/?type=visualization#pie_chart
@亚当; 如果您想编辑文本，请检查此http://code.google.com/apis/ajax/playground/?type=visualization#pie_chart
you can change your code from here
您可以从这里更改您的代码
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);
and if you want your custom tooltipyou have to use javascriptfor these
如果你想要custom tooltip你必须使用javascript这些
http://code.google.com/p/gvtooltip/
http://code.google.com/p/gvtooltip/
http://informationandvisualization.de/blog/tooltips-google-chart-api
http://informationandvisualization.de/blog/tooltips-google-chart-api
