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

问题描述

我有谷歌组合图表，想添加一个工具提示.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?

推荐答案

对于谷歌图表，可以参考具体图表的数据格式

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 Combo Chart，如何添加自定义 HTML Tooltip的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！