2016-11-16 45 views
0

我正在尝试将工具提示添加到Google区域图表,但我收到了意想不到的行为。我拿了Area Chart JSFiddle example并修改它以添加一个自定义工具提示,如here所述。我的内容是这样的:谷歌图表区域图表自定义工具提示不按预期方式工作

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

    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Sales', 'Expenses', { type: 'string', role: 'tooltip'}], 
     ['2013', 1000,  400, 'wtf'], 
     ['2014', 1170,  460, 'hithere'], 
     ['2015', 660,  1120, 'doh'], 
     ['2016', 1030,  540, 'moohaha'] 
    ]); 

    var options = { 
     title: 'Company Performance', 
     hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, 
     vAxis: {minValue: 0}, 
     focusTarget: 'category' 
    }; 

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    } 

的jsfiddle这里:https://jsfiddle.net/accelerate/y18tb8eq/

而不是更换整个提示内容,如我所料,“费用”的提示行获取我的提示数据替换。例如,第一组数据的工具提示如下所示:

2013 
Sales: 1,000 
Expenses: wtf 

有人可以向我解释我做错了什么吗?

回答

0

我想通了。工具提示在哪一栏是重要的。我需要在第一列之后立即放置工具提示列。所以我的标题栏必须如下所示:

['Year', { type: 'string', role: 'tooltip'}, 'Sales', 'Expenses']