javascript - 谷歌图表获取自定义工具提示来处理动画

Question

这是我的代码，它已损坏。我希望鼠标悬停时显示绝对数字，而不是百分比。谷歌的指南没有带有动画的示例，他们的示例使用数据表方法而不是数组。我想我需要以某种方式告诉谷歌我有第三列，它是一个工具提示，目前它将它绘制为一个栏。

     google.load("visualization", "1", {
   packages: ["corechart"]
 });
 google.setOnLoadCallback(init);

 function init() {
   var rowData1 = [
     ['key', 'Percentage', 'tooltip'],
     ['PLUS', 20.9, 3855],
     ['EDU', 18.4, 3400],
     ['GEO', 15.6, 2872],
     ['NO FLAG', 45.2, 8342]
   ];
   var rowData2 = [
     ['key', 'Percentage', 'tooltip'],
     ['PLUS', 54.2, 974],
     ['EDU', 6.7, 120],
     ['GEO', 39.2, 704],
     ['NO FLAG', 0.0, 0]
   ];

   // Create and populate the data tables.
   var data = [];
   data[0] = google.visualization.arrayToDataTable(rowData1);
   data[1] = google.visualization.arrayToDataTable(rowData2);

   var options = {
     // removes the key
     legend: {
       position: 'none'
     },
     // puts popup boxes on bar

     width: 600,
     height: 300,
     vAxis: {
       title: "vertical axis"
     },
     hAxis: {
       title: "horizontal axis"
     },
     seriesType: "bars",
     series: {
       5: {
         type: "line"
       }
     },
     animation: {
       duration: 1000,
       easing: 'out'
     },
   };
   var current = 0;
   // Create and draw the visualization.

   var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
   var button = document.getElementById('b1');

   function drawChart() {
     // Disabling the button while the chart is drawing.
     button.disabled = true;
     google.visualization.events.addListener(chart, 'ready',
       function() {
         button.disabled = false;
         button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
       });
     options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';
     // custom popup box request

     chart.draw(data[current], options);
   }
   drawChart();

   button.onclick = function() {
     current = 1 - current;
     drawChart();
   }
 }

我尝试将数组数据转换为 DataTables 并使用

     if (current == 0) { chart.draw(dataTable1, options); }
     else{ chart.draw(dataTable2, options); }

选择要绘制的图表，但这不起作用。而且它不太容易理解和不优雅，数据表需要设置很多属性，所以重复。

Answer 1

需要使用对象符号定义工具提示列...

var rowData1 = [
  ['key', 'Percentage', {role: 'tooltip'}],
  ['PLUS', 20.9, 3855],
  ['EDU', 18.4, 3400],
  ['GEO', 15.6, 2872],
  ['NO FLAG', 45.2, 8342]
];
var rowData2 = [
  ['key', 'Percentage', {role: 'tooltip'}],
  ['PLUS', 54.2, 974],
  ['EDU', 6.7, 120],
  ['GEO', 39.2, 704],
  ['NO FLAG', 0.0, 0]
];