javascript – 在Google时间线图表上自定义工具提示

2019-08-29 01:37:35 阅读：211 来源： 互联网

标签：javascript charts google-visualization

我创建了一个Google时间线图表来查看我的音乐收听历史.它看起来像这样：

我想从工具提示中删除持续时间部分,但找不到任何选项.我尝试添加这些行：

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

我的dataTable.addRows([])函数中的一行如下所示：

['25 August', 'Kasabian - La Fee Verte', new Date(2016,01,01, 13,37,32), new Date(2016,01,01, 13,43,19), 'tooltip example'],

但它仍然显示与图像中相同的工具提示.我实际上想要显示Kasabian – La Fee Verte和8月25日：下午1:37 – 下午1:43,就像在图像中一样,但我想删除持续时间.

解决方法:

根据data format的时间轴图表,工具提示应该在第3列.

看下面的工作片段……

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.Timeline(container);

    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({type: 'string', id: 'RowLabel'});
    dataTable.addColumn({type: 'string', id: 'BarLabel'});
    dataTable.addColumn({type: 'date', id: 'Start'});
    dataTable.addColumn({type: 'date', id: 'End'});

    dataTable.addRows([
      ['25 August', 'Kasabian - La Fee Verte', new Date(2016,01,01, 13,37,32), new Date(2016,01,01, 13,43,19)],
      ['26 August', 'Test Data 1', new Date(2016,01,01, 13,37,32), new Date(2016,01,01, 13,43,19)],
      ['27 August', 'Test Data 2', new Date(2016,01,01, 13,37,32), new Date(2016,01,01, 13,43,19)],
    ]);

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

    var dateFormat = new google.visualization.DateFormat({
      pattern: 'h:mm a'
    });

    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
      var tooltip = '<div class="ggl-tooltip"><span>' +
        dataTable.getValue(i, 1) + '</span></div><div class="ggl-tooltip"><span>' +
        dataTable.getValue(i, 0) + '</span>: ' +
        dateFormat.formatValue(dataTable.getValue(i, 3)) + ' - ' +
        dateFormat.formatValue(dataTable.getValue(i, 4)) + '</div>';

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

    chart.draw(dataTable, {
      tooltip: {
        isHtml: true
      }
    });
  },
  packages: ['timeline']
});

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

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

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

标签：javascript,charts,google-visualization
来源： https://codeday.me/bug/20190829/1757271.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 在Google时间线图表上自定义工具提示