图表下的GoogleCharts工具提示

Question

我正在尝试自定义一个Google图表。问题是我的工具提示是在表格下呈现而不是在它上面。我该如何解决这个问题。

以下是配置：

<!-- <div id="chart_AreaChart" class="chart"> </div> -->
<div id="chart_ColumnChart" class="chart"> </div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"> </script>
<script type="text/javascript">

function getCategoryName( category ){
    var categoryMap = {
    1:'Американски колеж',
    2:'Езикови гимназии',
    3:'Специализирани (СМГ, НПМГ и др)',
    4:'Частни гимназии',
    5:'С усилено изучаване на език',
    6:'Чужбина'
  };
  return categoryMap[category];
}

function createTooltipHTML( year, category, value){
  console.log('createTooltipHTML(' + year + ', ' + category + ', ' + value + ');' );
    return '<div style="padding: 5px;">' +
                '<table style="text-align: center; padding: 7px; background: white;">' +
            '<tr><td>Випуск - ' + year + 'г -</td></tr>' +
            '<tr><td>' + getCategoryName(category) + '</td></tr>' +
            '<tr><td>' + value + '%</td></tr>' +
          '</table>'+
         '</div>';
}

function getDataTable(){
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'Випуск');
    dataTable.addColumn('number', getCategoryName(1));
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
    dataTable.addColumn('number', getCategoryName(2));
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
    dataTable.addColumn('number', getCategoryName(3));
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
    dataTable.addColumn('number', getCategoryName(4));
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
    dataTable.addColumn('number', getCategoryName(5));
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
    dataTable.addColumn('number', getCategoryName(6));
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
    dataTable.addRows([
      ['96', 20, createTooltipHTML(96, 1, 20) , 33.5, createTooltipHTML(96, 2, 33.5) , 13 , createTooltipHTML(96, 3, 13), 2 , createTooltipHTML(96, 4, 2) , 4 , createTooltipHTML(96, 5, 4) , 7, createTooltipHTML(96, 6, 7)]
    ]);
    return dataTable;
}

function draw_ColumnChart() {
  // alert("ColumnChart");
  var tableData = [
      ['Випуск',
          getCategoryName(1), {'type': 'string', 'role': 'tooltip', 'property': {'html': true}},
          getCategoryName(2), {'type': 'string', 'role': 'tooltip', 'p': {'html': true}},
          getCategoryName(3), {'type': 'string', 'role': 'tooltip', 'p': {'html': true}},
          getCategoryName(4), {'type': 'string', 'role': 'tooltip', 'p': {'html': true}},
          getCategoryName(5), {'type': 'string', 'role': 'tooltip', 'p': {'html': true}},
          getCategoryName(6), {'type': 'string', 'role': 'tooltip', 'p': {'html': true}},
      ],
      ['96', 20, createTooltipHTML(96, 1, 20) , 33.5, createTooltipHTML(96, 2, 33.5) , 13 , createTooltipHTML(96, 3, 13), 2 , createTooltipHTML(96, 4, 2) , 4 , createTooltipHTML(96, 5, 4) , 7, createTooltipHTML(96, 6, 7)],
      // ['97', 28 , 28 , 9 , 16 , 19 , 0],
      // ['98', 42 , 18 , 6 , 34 , 0 , 0],
      // ['99', 18 , 36 , 0 , 36 , 10 , 0],
      // ['00', 32 ,32 , 9 , 12 , 15 , 0 ],
      // ['01', 6 , 33 , 14 , 35 , 6 , 6 ],
      // ['02', 15 , 45 , 10 , 15 , 10 , 5],
      // ['03', 18 , 53 , 0 , 23 , 0 , 6  ],
      // ['04', 21 , 47 , 0 , 16 , 16 , 0],
      // ['05', 30, 10 , 0 , 30 , 25 , 5],
      // ['06', 30 , 48 , 16 , 6 , 0 , 0],
      // ['07', 29, 25 , 4 , 25 , 0 , 17],
      // ['08', 31 , 28 , 10 ,  17 , 4 , 10],
      // ['09', 44 , 6 , 22 , 20 , 0 , 8],
      // ['10', 44 , 6 , 22 , 20 , 0 , 8],
      // ['11', 54 , 26 , 0 , 11 , 0 , 9 ],
      // ['12', 45 , 34 , 5 , 5 , 2 , 9 ],
      // ['13', 58 , 29 , 3 , 3 , 3 , 4 ],
      // ['14', 42 , 42 , 8 , 2 , 4 , 2 ],
  ];
  // put columns in correct order
  for ( var rowIndex = 0 ; rowIndex < tableData.length ; rowIndex ++){
    var row = tableData[rowIndex];
    var temp = row[1];
    row[1] = row[6];
    row[6] = temp;

    temp = row[2];
    row[2] = row[5];
    row[5] = temp;

    temp = row[3];
    row[3] = row[4];
    row[4] = temp;
  }

  // var data_ColumnChart = google.visualization.arrayToDataTable(tableData);
  var data_ColumnChart = getDataTable();

  var options_ColumnChart = {
      title:'Реализация по години в проценти',
      titleTextStyle: {
        fontSize: 28,
        bold: false,
      },
      height: 600,
      hAxis: {
          title:'Випуск',
          minValue: 0
      },
      vAxis: {
          title: 'Процент от всички завършващи'
      },
      legend: {
          position: 'right'
      },
      bar: {
          groupWidth: '75%'
      },
      isStacked: 'percent',
      tooltip: { isHtml: true },
      series: {
        0:{color:'#13AAAD'},
        1:{color:'#13A45D'},
        2:{color:'#BFEAA6'},
        3:{color:'#FEF10C'},
        4:{color:'#F8A51C'},
        5:{color:'#F88224'},
      }
  };

  var ColumnChart = new google.visualization.ColumnChart(document.getElementById('chart_ColumnChart'));
  ColumnChart.draw(data_ColumnChart, options_ColumnChart);
}

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

window.onresize = function(event) {
  draw_ColumnChar();
  // draw_AreaChart();
};


// Reminder: you need to put https://www.google.com/jsapi in the head of your document or as an external resource on codepen //
</script>

以下是结果：

Answer 1

似乎在这里工作正常......

put

function getCategoryName( category ){
    var categoryMap = {
    1:'category 1',
    2:'category 2',
    3:'category 3',
    4:'category 4',
    5:'category 5',
    6:'category 6'
  };
  return categoryMap[category];
}

function createTooltipHTML( year, category, value){
    return '<div style="padding: 5px;">' +
          '<table style="text-align: center; padding: 7px; background: white;">' +
      '<tr><td>year - ' + year + ' - </td></tr>' +
      '<tr><td>' + getCategoryName(category) + '</td></tr>' +
      '<tr><td>' + value + '%</td></tr>' +
    '</table>'+
   '</div>';
}

function getDataTable(){
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'col0');
    dataTable.addColumn('number', getCategoryName(1));
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
    dataTable.addColumn('number', getCategoryName(2));
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
    dataTable.addColumn('number', getCategoryName(3));
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
    dataTable.addColumn('number', getCategoryName(4));
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
    dataTable.addColumn('number', getCategoryName(5));
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
    dataTable.addColumn('number', getCategoryName(6));
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
    dataTable.addRows([
      ['96', 20, createTooltipHTML(96, 1, 20) , 33.5, createTooltipHTML(96, 2, 33.5) , 13 , createTooltipHTML(96, 3, 13), 2 , createTooltipHTML(96, 4, 2) , 4 , createTooltipHTML(96, 5, 4) , 7, createTooltipHTML(96, 6, 7)]
    ]);
    return dataTable;
}

function draw_ColumnChart() {
  var tableData = [
      ['col0',
          getCategoryName(1), {'type': 'string', 'role': 'tooltip', 'property': {'html': true}},
          getCategoryName(2), {'type': 'string', 'role': 'tooltip', 'p': {'html': true}},
          getCategoryName(3), {'type': 'string', 'role': 'tooltip', 'p': {'html': true}},
          getCategoryName(4), {'type': 'string', 'role': 'tooltip', 'p': {'html': true}},
          getCategoryName(5), {'type': 'string', 'role': 'tooltip', 'p': {'html': true}},
          getCategoryName(6), {'type': 'string', 'role': 'tooltip', 'p': {'html': true}},
      ],
      ['96', 20, createTooltipHTML(96, 1, 20) , 33.5, createTooltipHTML(96, 2, 33.5) , 13 , createTooltipHTML(96, 3, 13), 2 , createTooltipHTML(96, 4, 2) , 4 , createTooltipHTML(96, 5, 4) , 7, createTooltipHTML(96, 6, 7)],
  ];

  // put columns in correct order
  for ( var rowIndex = 0 ; rowIndex < tableData.length ; rowIndex ++){
    var row = tableData[rowIndex];
    var temp = row[1];
    row[1] = row[6];
    row[6] = temp;

    temp = row[2];
    row[2] = row[5];
    row[5] = temp;

    temp = row[3];
    row[3] = row[4];
    row[4] = temp;
  }

  // var data_ColumnChart = google.visualization.arrayToDataTable(tableData);
  var data_ColumnChart = getDataTable();

  var options_ColumnChart = {
      title:'title',
      titleTextStyle: {
        fontSize: 28,
        bold: false,
      },
      height: 600,
      hAxis: {
          title:'haxis title',
          minValue: 0
      },
      vAxis: {
          title: 'vaxis title'
      },
      legend: {
          position: 'right'
      },
      bar: {
          groupWidth: '75%'
      },
      isStacked: 'percent',
      tooltip: { isHtml: true },
      series: {
        0:{color:'#13AAAD'},
        1:{color:'#13A45D'},
        2:{color:'#BFEAA6'},
        3:{color:'#FEF10C'},
        4:{color:'#F8A51C'},
        5:{color:'#F88224'},
      }
  };

  var ColumnChart = new google.visualization.ColumnChart(document.getElementById('chart_ColumnChart'));
  ColumnChart.draw(data_ColumnChart, options_ColumnChart);
}

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