Question

这是我的代码，它被打破了。我想在鼠标上显示绝对数字，而不是百分比。谷歌的指南没有动画的例子，他们的例子使用数据表方法而不是数组。我想我需要以某种方式告诉Google我有第三列是工具提示，目前它将它作为一个条形图。

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

选择要绘制的图表，但这不起作用。并且它不易理解和不优雅，dataTables需要设置大量属性，所以重复。

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

Answer 2

更改Google可视化组合图表系列选项，如下所示：

series: {
       0: {
         type: "line"
       }
    }

每个数据表列都被视为Google可视化组合图表中的一个系列。

这里

“百分比”是行系列号是0

“工具提示”是条形序列号是1

谷歌可视化组合图表没有错。

经过上述更改后，您将获得以下输出：

Google图表获取自定义工具提示以使用动画

2 个答案: