dongyunshan4066 2015-12-11 20:24
浏览 59
已采纳

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

I am using PHP / mongodb / javascript to build my Google Charts Line charts. In php I made one column as role tooltip (last but one column). Right now I am seeing default tooltip which is X-axis (Date) and Y-axis (Value). 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. 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. 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.

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

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
       }
 });
  • 写回答

1条回答 默认 最新

  • duanjian7343 2016-06-26 14:03
    关注

    Most of the role columns apply to the nearest left neighbor data column, as indicated here in the Google Charts documentation. If you want a custom tooltip for all the lines in your LineChart, you'll have to add a role column for each. I don't think you'll need to bother with focusTarget.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题