Question

我是谷歌组合图，喜欢添加工具提示。 icCube文档有一个示例如何添加HTML工具提示，但这不适用于系列，只有系列中的最后一项获取工具提示。我找到了如何执行此操作的答案，请参阅此post。

但我怎样才能在icCube中实现这一目标？

Answer 1

对于Google图表，您可以参考特定图表的Data Format

对于大多数人来说，工具提示遵循系列列

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

注意：要使用自定义html工具提示，必须具备以下条件......

该列必须具有属性 - ＆gt; html: true

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

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

tooltip: {isHtml: true}

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

然后根据系列列中的值构建工具提示

＆＃13;

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']
});

＆＃13;

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

＆＃13;

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

＆＃13;

Google Combo Chart有多个系列，如何添加自定义HTML工具提示

1 个答案: