如何更改谷歌图表API的工具提示文本？

Question

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>

假设我们这样做时，它会做这个

转换为

也许可以使用监听器的方式实现？

- Adam Ramadhan

---

这里似乎有一些关于如何做到这一点的细节 http://code.google.com/apis/chart/interactive/docs/examples.html 滚动到页面底部。 - Toby Allen

这个答案非常简单易懂！https://dev59.com/Tmoy5IYBdhLWcg3wnPSJ#32862538 - Hayden Thring

Answer 1

对于自定义工具提示，可以将工具提示添加为额外的列：

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

- minaz

---

对于那些使用饼图（PieCharts）并感到困惑为什么它不起作用的人来说，由于某种原因，它与饼图不兼容。[问题＃507]（https://code.google.com/p/google-visualization-api-issues/issues/detail?id=507） - Michal

事实证明它无法工作的原因是因为它不被支持，正如 Tooltip 描述页面 底部所述。 - Michal

几年过去了，现在似乎得到了支持，如工具提示描述页面和问题页面所示-请参见最后几个条目：https://github.com/google/google-visualization-issues/issues/507#issuecomment-125237979 - wunth

Answer 2

@Adam; 如果你想编辑文本，可以参考这个链接：http://code.google.com/apis/ajax/playground/?type=visualization#pie_chart

你可以从这里修改你的代码。

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

如果您想要自定义的工具提示，您需要使用 javascript 来实现。

http://code.google.com/p/gvtooltip/

http://informationandvisualization.de/blog/tooltips-google-chart-api

- sandeep

---

谷歌代码链接演示似乎不能正常运作，最后一个链接看起来很不错。 - Toby Allen

是的，gvtooltip已被淘汰，因为Google Visualization Chart现在有一个内置的。从现在开始，内置的就是你所需要的。 - fletchsod