Question

我有一张在线图表here，当我用鼠标查看点数时，我看不到默认的工具提示。你能帮我找出原因吗？

非常感谢这是我正在使用的代码，您可以看到我尝试手动放置工具提示，但没有结果......：

var dataArray= [ ['Weight', 'Volume \n(Performance)', 'Volume \n(Small-Wave)', 'Volume \n (Step-Up)'] ];
    //var dataArray= [ ['Weight', 'Volume'] ];
    var linearRegX=[];
    var linearRegY=[];
    j=0;
    var tooltipOn = 0;
        for (i = 1; i < prodata.length; ++i) {
            if ( Number(prodata[i]['volume']) !== 0) {
                var tooltipString = prodata[i]['name'] + ' ' + prodata[i]['model'];
                if (prodata[i]['model'] == 'SemiPro12' && prodata[i]['length'] == "6'6" ){  //remove some models
                } else if ( prodata[i]['fun'] == '0') { // performance boards
                linearRegX[j] = Number(prodata[i]['weight']) ;
                linearRegY[j] = Number(prodata[i]['volume']) ;
                if (!tooltipOn){
                    dataArray.push ( [ Number(prodata[i]['weight']), Number(prodata[i]['volume']), null, null ] );
                } else {
                    dataArray.push ( [ Number(prodata[i]['weight']), Number(prodata[i]['volume']), null, null, tooltipString ] );
                }

                j=j+1;
            } else if ( prodata[i]['fun'] == '1') { // small-wave boards
                if (!tooltipOn){
                    dataArray.push ( [ Number(prodata[i]['weight']), null, Number(prodata[i]['volume']), null ] );
                } else {
                    dataArray.push ( [ Number(prodata[i]['weight']), null, Number(prodata[i]['volume']), null, tooltipString ] );
                }                       
            } else if ( prodata[i]['fun'] == '2') { // step-up boards
                if (!tooltipOn){
                    dataArray.push ( [ Number(prodata[i]['weight']), null, null, Number(prodata[i]['volume']) ] );
                } else {
                    dataArray.push ( [ Number(prodata[i]['weight']), null, null, Number(prodata[i]['volume']), tooltipString ] );
                }   

            }
        }
    }
    //option1
    //var data = google.visualization.arrayToDataTable(dataArray);
    //option2
    var data = new google.visualization.DataTable();
    //      console.log("dataArray :");
    //      console.log(dataArray);
    data.addColumn('number', 'Weight');
    data.addColumn('number', 'Volume \n(Performance)');
    data.addColumn('number', 'Volume \n(Small-Wave)');
    data.addColumn('number', 'Volume \n(Step-Up)');     
    //adding tooltips (mouseover info)
    if (tooltipOn){
        data.addColumn({type: 'string', role: 'tooltip'});
    }

    var dataArraySliced = dataArray.slice(1, dataArray.length);
    data.addRows(dataArraySliced);

    var options = {
        title: 'Weight of pro surfer vs. Volume of his pro model',
        hAxis: {title: 'Weight (kg)', minValue: 53, maxValue: 100}, //55
        vAxis: {title: 'Volume (l)'}, //, minValue: 20, maxValue: 40},   //20
        legend: 'none',
           width: '100%',
            height: '100%',
           colors: ['#000000'],
           series: {
                  1: { color: '#06b4c8' }, 
                  2: { color: '#575e6a' }
              },
        legend: {position: 'top right', textStyle: {fontSize: 8}},
        chartArea: {width: '60%'},
           trendlines: { 0: {//type: 'exponential',
                    visibleInLegend: true,
                    color: 'grey',
                    lineWidth: 2,
                    opacity: 0.2,
                    labelInLegend: 'Linear trendline\n(Performance)'
                    } 
                }    // Draw a trendline for data series 0.
    };
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));        
    chart.draw(data, options);
    google.visualization.events.addListener(chart, 'ready', myReadyHandler());

Answer 1

我在jsfiddle上复制了你的图表，它运行正常：http://jsfiddle.net/asgallant/j3778edd/。我看到的唯一问题是您调用myReadyHandler并在＆＃34; ready＆＃34;中传递其返回值（可能是null）。事件监听器而不是传递函数本身：

google.visualization.events.addListener(chart, 'ready', myReadyHandler());

应该是：

google.visualization.events.addListener(chart, 'ready', myReadyHandler);

虽然技术上不正确，但不太可能是你问题的罪魁祸首。

我的测试结果与other question的维度问题也不一样。您的代码中可能存在一些干扰图表的CSS或javascript。我建议通过禁用你绘制的图表并非严格必需的所有javascript和css来开始解决这个问题的过程。如果问题仍然存在，那么很可能在您的图表代码中;如果它消失了，那么它就在其他地方。如果我怀疑它位于其他地方，请尝试逐个启用其余代码，直到图表中断 - 当发生这种情况时，您发现了可能的罪魁祸首。

Answer 2

我遇到了一种我无法再看到工具提示的情况，我无法弄清楚原因。这就是我在这里结束的方式。我发现了我的问题，完全与上面的答案无关。它与z-index风格有关。这就是我所拥有的：

<div google-chart chart="chart_summary" style="height: 400px; top: -50px; z-index:-998;" on-ready="chartReady()"></div>

我更改了z-index值以测试其他内容并忘记了它。由于该值太低，它基本上落后于覆盖它的其他东西（透明），阻止了鼠标悬停事件被触发。

所以，如果你改变了z-index，（css也可能改变它），那么你的图形可能被某个透明对象隐藏了，这个对象的z-index高于你的图形。一个简单的测试就是给它一个非常高的z指数，看看你是否还有这个问题。

<div google-chart chart="chart_summary" style="height: 400px; top: -50px; z-index:1000000;" on-ready="chartReady()"></div>

鼠标悬停时不显示谷歌图表工具提示

2 个答案: