charts - 具有多个系列的 Google 组合图表，如何添加自定义 HTML 工具提示

Question

我有谷歌组合图表，喜欢添加工具提示。icCube 文档有一个如何添加 HTML 工具提示的示例，但这不适用于系列，只有系列中的最后一项获得工具提示。我找到了如何做到这一点的答案，请参阅这篇文章。

但是我怎样才能在 icCube 中实现这一点？

Answer 1

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

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

要拥有多个系列，每个系列都有自己的自定义 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>