简体   繁体   English

折线图中的Google图表自定义工具提示仅适用于focustarget:category

[英]Google charts custom tooltips in linecharts works only with focustarget: category

I am using PHP / mongodb / javascript to build my Google Charts Line charts. 我正在使用PHP / mongodb / javascript构建我的Google Charts折线图。 In php I made one column as role tooltip (last but one column). 在php中,我做了一栏作为角色工具提示(最后但只有一栏)。 Right now I am seeing default tooltip which is X-axis (Date) and Y-axis (Value). 现在,我看到默认的工具提示是X轴(日期)和Y轴(值)。 But I want to show Date, Value and an additional info (Image version) in tooltip. 但我想在工具提示中显示日期,值和其他信息(图像版本)。 With the tooltip column, it is supposed to override the default tooltip but it is not happening. 使用工具提示列时,它应该覆盖默认的工具提示,但不会发生。

If I add focusTarget: category in options, I am able to see Date, Value and Image version but for the whole category, I do not want this. 如果在选项中添加focusTarget:类别,则可以看到日期,值和图像版本,但是对于整个类别,我都不需要。 I just want to see Date, Value and Image version for that point that I click or hover. 我只想查看单击或悬停该点的日期,值和图像版本。

From google documentation FocusTarget: "datum" seem to be what I was looking for. 从谷歌文档FocusTarget:“基准”似乎是我一直在寻找。 When i do that, again I only see the default tooltip. 当我这样做时,我再次只能看到默认的工具提示。

basically the one and only time default tooltip is overriden with custom tooltip is when i use focustarget : category. 基本上,当我使用focustarget:category时,唯一的一次默认工具提示被自定义工具提示覆盖。

Not sure what I am missing. 不知道我在想什么。

$table         = array();
$table['cols'] = array(
    array('label' => 'Date','type' => 'date')
); 

array_push($table['cols'], array('type' => 'string', 'role' => "tooltip"));
array_push($table['cols'], array('label' => 'Label', 'type' => 'string'));

$numCols = count($table['cols']) - 1;
$numColsMinus1 = count($table['cols']) - 2;

From database, values go into array 从数据库将值放入数组

$rows[$row_index]['c'][$numColsMinus1]['v'] = $r["image_ver"];
$rows[$row_index]['c'][$col_index]['v'] = $r[$datatype];
$rows[$row_index]['c'][$numCols]['v'] = $label; 

Below is Google ChartWrapper 以下是Google ChartWrapper

var chart = new google.visualization.ChartWrapper({
       'chartType': 'LineChart',
       'containerId': 'chart_div',
       'options': {
         'interpolateNulls': 'true',
         'curveType': 'false',
         'animation':{
           'duration': 1000,
           'easing': 'inAndOut'
         },
      'titleTextStyle':{ 'fontName': "Verdana", 'fontSize': 15, 'bold': 'false', 'italic': 'false' },
        'tooltip': {
            'textStyle': { 'fontName': "Arial", 'fontSize': 14, 'italic': 'false' },
             //'isHtml': 'true'     
             //'trigger' : 'selection',
             //'trigger' : 'both',
             //'trigger' : 'focus'
             //'legend' : 'none'
      },
        "focusTarget": "category",
        //"focusTarget": "datum",
        //"focusTarget": "",
        //"focusTarget": "series",
    'chartArea': {'height': '85%', 'width': '70%'},
         'hAxis': {'slantedText': false, 'maxAlternation': 1, 'viewWindowMode': 'pretty'},
         'allowHtml': 'true',
         'legend': {'allowHtml': 'true',
                    'textStyle': {fontSize: 11}},
         'pointSize': 3
       }
 });

Most of the role columns apply to the nearest left neighbor data column, as indicated here in the Google Charts documentation . Google图表文档中所示,大多数角色列都适用于最近的左邻域数据列。 If you want a custom tooltip for all the lines in your LineChart, you'll have to add a role column for each. 如果要为LineChart中的所有行提供自定义工具提示,则必须为每个行添加一个角色列。 I don't think you'll need to bother with focusTarget. 我认为您不需要麻烦focusTarget。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM