谷歌组合图表多系列，如何添加自定义HTML工具提示

Question

谷歌组合图表多系列，如何添加自定义HTML工具提示

chartsgoogle-visualizationiccube-reporting

4

我使用了 Google Combo Chart 并希望添加一个工具提示。icCube文档提供的示例展示如何添加HTML工具提示，但是这仅适用于系列中的最后一项，无法应用于其他数据点。我找到了一个解决方案，请参见此贴。

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

- Niels

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WhiteHat · Accepted Answer

对于谷歌图表，您可以参考特定图表的数据格式

对于大多数情况，工具提示遵循系列列

要有多个系列，每个系列都有自己的自定义html工具提示，
在每个系列列后添加一列

注意: 要使自定义html工具提示起作用，必须满足以下条件...

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

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

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

tooltip：{isHtml：true}

请参阅以下工作片段，工具提示列最初加载为null

然后，基于系列列中的值构建工具提示

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>