如何将工具提示置于图表顶部

Question

我现在有一张像这张图片的谷歌图表

现在我想将工具提示移到图表顶部（不要关心鼠标的位置）。

我该怎么做。

这是我的代码：

var chartData = new google.visualization.DataTable();
chartData.addColumn('string', 'Time');
chartData.addColumn('number', 'Average Score');
chartData.addColumn({ 'type': 'string', 'role': 'tooltip', 'p': { 'html': true } });

chartData.addRows(data);

var options = {
    chartArea: { left: 0, top: 100, width: "100%", height: "100%" },
    title: '',
    opacity: 100,
    backgroundColor : {fill: '#000'},
    hAxis: {
        textPosition: 'none', 
        titleTextStyle: {color: '#333'},  
        titleTextStyle: {color: '#2902A3'},
    },
    vAxis: {
        textPosition: 'none',
        opacity: 100,
        minValue: 0,
        gridlines: { color: '#0D2B56', count: 10 },
        baselineColor: 'white',
    },
    series:{
        0:{
            color: '#3C93FF',
            areaOpacity: '0.68'
        }
    },
    crosshair: {
        orientation: 'vertical',
        trigger: 'focus',
        color: '#fff'
    },
    legend: 'none',
    tooltip: {isHtml: true},
};


google.load("visualization", "1", { packages: ["corechart"] });
var chart = new google.visualization.AreaChart(document.getElementById('chart'));
chart.draw(chartData, options);

我也使用此功能来创建工具提示的内容

var createToolTip = function (name, value) {
    return '<div class="googletooltip" ><span>' + name + ':</span><span style="padding-left:20px" >' + value + '</span></div>';
}

并且这种风格也

.googletooltip{
    color:#fff;
    border-style: solid;
    border-width: 2px;
    border-color: #3882C4;
    background: #000;
    padding:2px 15px 2px 15px;
    font-weight: bold;
}

非常感谢

Answer 1

尝试为.googletooltip类添加top属性和position属性。如果没有，请尝试使用margin属性，如果其他属性不起作用。解决这三个属性，看看是否能够移动工具提示。如果它仍然不起作用，请告诉我。

.googletooltip{
 color:#fff;
 border-style: solid;
 border-width: 2px;
 border-color: #3882C4;
 background: #000;
 padding:2px 15px 2px 15px;
 font-weight: bold;
 }

Answer 2

你在哪里调用createToolTip函数？生成数据chartData.addRows(data);时是否调用它？

参考：检查如何使用createCustomHTMLContent函数@ https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content