Google组合图具有多个系列，如何添加自定义HTML工具提示 [英] Google Combo Chart with multiple series, how to add custom HTML Tooltip

问题描述

我有Google组合图，并且想添加一个工具提示。 icCube文档提供了一个如何添加HTML工具提示的示例，但这不适用于系列，只有系列中的最后一项才能获得工具提示。我找到了解决方法，请参见帖子。

I've Google combo chart and like to add a Tooltip. The icCube documention has an example how to add a HTML tooltip but this will not work for series, only the last item in the serie gets the tooltip. I found an answer how to do this, see this post.

但是我如何在icCube中实现呢？

But how can I achieve this in icCube?

推荐答案

对于Google图表，您可以引用数据格式

for google charts, you can reference the Data Format of the specific chart

大多数情况下，工具提示紧随系列列

for most, the tooltip follows the series column

具有多个系列，每个系列都有自己的自定义html工具提示，

在每个系列列之后添加一列

to have multiple series, each with it's own custom html tooltip,
add a column after each series column

注意：用于自定义html工具提示要正常工作，必须具有以下内容...

该列必须具有属性-> html：true

the column must have property --> html: true

dataTable.addColumn（{type：'string'，role：'tooltip'，p：{html：true} }）;

，并且配置选项必须包括...

and the configuration options must include...

工具提示：{isHtml：true}

请参见以下工作片段中，工具提示列最初以 null

see following working snippet, the tooltip columns are loaded initially as null

的形式加载，然后根据系列列

then the tooltip is built based on the values in the series columns

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

    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({type: 'string', label: 'Year'});

    // series 0
    dataTable.addColumn({type: 'number', label: 'Category A'});
    dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});

    // series 1
    dataTable.addColumn({type: 'number', label: 'Category B'});
    dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});

    // series 2
    dataTable.addColumn({type: 'number', label: 'Category C'});
    dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});

    dataTable.addRows([
      ['2014', 1000, null, 2000, null, 3000, null],
      ['2015', 2000, null, 4000, null, 6000, null],
      ['2016', 3000, null, 6000, null, 9000, null],
    ]);

    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
      dataTable.setValue(i, 2, getTooltip(i, 1));
      dataTable.setValue(i, 4, getTooltip(i, 3));
      dataTable.setValue(i, 6, getTooltip(i, 5));
    }

    function getTooltip(rowIndex, columnIndex) {
      return '<div class="ggl-tooltip"><span>' +
        dataTable.getValue(rowIndex, 0) + ': </span>' +
        dataTable.getFormattedValue(rowIndex, columnIndex) + '</div>';
    }

    chart.draw(dataTable, {
      legend: {
        position: 'bottom'
      },
      pointSize: 4,
      seriesType: 'area',
      series: {
        2: {
          pointSize: 12,
          pointShape: {
            type: 'star',
            sides: 5,
            dent: 0.6
          },
          type: 'scatter'
        }
      },
      tooltip: {isHtml: true}
    });
  },
  packages: ['corechart']
});

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

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

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

这篇关于Google组合图具有多个系列，如何添加自定义HTML工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！