charts - Google 图表 - 如何将文本附加到默认工具提示

Question

我想使用默认工具提示向我的图表添加自定义工具提示，例如仅向其附加一些文本。

这是否可能，或者我必须自己用 html 创建它？

data= google.visualization.arrayToDataTable([
        ["Element", "Duration ", { role: "style" }, { role: 'tooltip' }],
        ["Count", 23515, "orange", ???],
      ]);   

它是怎样的(默认工具提示):

我想要的方式:

将持续时间附加为可读时间，但仍保留默认工具提示

Answer 1

无法通过标准功能将内容添加到默认工具提示

要执行此操作，需要在显示工具提示时直接对其进行操作

以下工作片段监听图表上的'onmouseover'事件
然后修改工具提示(如果找到)
使用作为事件参数的属性传递的行 #

请记住，样式(font-size)将根据图表的大小而变化
该代码片段从现有行复制样式

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {label: 'Element', type: 'string'},
        {label: 'Duration', type: 'number'},
        {role: 'style', type: 'string'}
      ],
      rows: [
        {c:[{v: 'Amazon Elastic Transcoder'}, {v: 3116, f: '3,116 s'}, {v: 'orange'}]},
        {c:[{v: 'Amazon Elastic Transcoder'}, {v: 8523, f: '8,523 s'}, {v: 'cyan'}]}
      ]
    });

    var options = {
      backgroundColor: 'transparent',
      legend: 'none',
      theme: 'maximized',
      hAxis: {
        textPosition: 'none'
      },
      tooltip: {
        isHtml: true
      }
    };

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.ColumnChart(container);

    google.visualization.events.addListener(chart, 'onmouseover', function (props) {
      var duration = dataTable.getValue(props.row, 1);
      var hours = parseInt( duration / 3600 ) % 24;
      var minutes = parseInt( duration / 60 ) % 60;
      var seconds = duration % 60;

      var tooltip = container.getElementsByTagName('ul');
      var tooltipLabel = container.getElementsByTagName('span');
      if (tooltip.length > 0) {
        // increase tooltip height
        tooltip[0].parentNode.style.height = '95px';

        // add new li element
        var newLine = tooltip[0].appendChild(document.createElement('li'));
        newLine.className = 'google-visualization-tooltip-item';

        // add span for label
        var lineLabel = newLine.appendChild(document.createElement('span'));
        lineLabel.style.fontFamily = tooltipLabel[0].style.fontFamily;
        lineLabel.style.fontSize = tooltipLabel[0].style.fontSize;
        lineLabel.style.color = tooltipLabel[0].style.color;
        lineLabel.style.margin = tooltipLabel[0].style.margin;
        lineLabel.style.textDecoration = tooltipLabel[0].style.textDecoration;
        lineLabel.innerHTML = dataTable.getColumnLabel(1) + ': ';

        // add span for value
        var lineValue = newLine.appendChild(document.createElement('span'));
        lineValue.style.fontFamily = tooltipLabel[0].style.fontFamily;
        lineValue.style.fontSize = tooltipLabel[0].style.fontSize;
        lineValue.style.fontWeight = tooltipLabel[0].style.fontWeight;
        lineValue.style.color = tooltipLabel[0].style.color;
        lineValue.style.margin = tooltipLabel[0].style.margin;
        lineValue.style.textDecoration = tooltipLabel[0].style.textDecoration;
        lineValue.innerHTML = hours + 'h ' + minutes + 'm ' + seconds + 's';
      }
    });

    chart.draw(dataTable, options);
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

要使用标准功能向工具提示添加内容需要完全替换工具提示

最好的结果是使用 html 工具提示

要使用 html 工具提示，必须满足以下两点

首先，工具提示列需要 html 列属性

{角色:'工具提示'，类型:'字符串'，p:{html:true}}

接下来，需要在配置选项中添加tooltip.isHtml: true

工具提示可以直接在数据中提供，
或动态添加，如以下代码片段所示...

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {label: 'Element', type: 'string'},
        {label: 'Duration', type: 'number'},
        {role: 'style', type: 'string'}
      ],
      rows: [
        {c:[{v: 'Amazon Elastic Transcoder'}, {v: 3116, f: '3,116 s'}, {v: 'orange'}]},
        {c:[{v: 'Amazon Elastic Transcoder'}, {v: 8523, f: '8,523 s'}, {v: 'cyan'}]}
      ]
    });

    dataTable.addColumn({role: 'tooltip', type: 'string', p: {html: true}});

    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
      var duration = dataTable.getValue(i, 1);
      var hours = parseInt( duration / 3600 ) % 24;
      var minutes = parseInt( duration / 60 ) % 60;
      var seconds = duration % 60;

      var tooltip = '<div class="ggl-tooltip"><span>' +
        dataTable.getValue(i, 0) + '</span><div>' +
        dataTable.getColumnLabel(1) + ': <span>' +
        dataTable.getFormattedValue(i, 1) + '</span></div><div>' +
        dataTable.getColumnLabel(1) + ': <span>' +
        hours + 'h ' + minutes + 'm ' + seconds + 's</span></div></div>';

      dataTable.setValue(i, 3, tooltip);
    }

    var options = {
      backgroundColor: 'transparent',
      legend: 'none',
      theme: 'maximized',
      hAxis: {
        textPosition: 'none'
      },
      tooltip: {
        //trigger: 'selection',
        isHtml: true
      }
    };

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.ColumnChart(container);
    chart.draw(dataTable, options);
  },
  packages:['corechart']
});

.ggl-tooltip {
  border: 1px solid #E0E0E0;
  font-family: Arial, Helvetica;
  font-size: 10pt;
  padding: 12px 12px 12px 12px;
}

.ggl-tooltip div {
  padding-top: 6px;
}

.ggl-tooltip span {
  font-weight: bold;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>