Google Combo Chart with multiple series, how to add custom HTML Tooltip

问题

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.

But how can I achieve this in icCube?

回答1:

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

for most, the tooltip follows the series column

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

NOTE: for custom html tooltips to work, the following must be in place...

the column must have property --> html: true

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

and the configuration options must include...

tooltip: {isHtml: true}

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>

来源：https://stackoverflow.com/questions/39466184/google-combo-chart-with-multiple-series-how-to-add-custom-html-tooltip

标签

charts

google-visualization

iccube-reporting