删除饼图谷歌图表的一部分的工具提示答案

【问题标题】：Removing tooltip for one part of piechart google charts删除饼图谷歌图表的一部分的工具提示
【发布时间】：2016-10-11 13:06:05
【问题描述】：

我有一个这样的图表结构：-

               data: {
                    cols: [
                        {
                            id: 'Type',
                            type: 'string'
                        },
                        {
                            id: 'percentage',
                            type: 'number'
                        },
                        {
                            id: 'tooltip',
                            role: 'tooltip',
                            type: 'string',
                            p: { html: true }
                        }
                    ],
                    rows: [
                        {
                            c: [
                                {
                                    v: typeA
                                },
                                {
                                    v: 20
                                },
                                {
                                    v: 'my Tooltip content'
                                }
                            ]
                        },
                        {
                            c: [
                                {
                                    v: 'typeB'
                                },
                                {
                                    v: 80
                                }
                            ]
                        }
                    ]
                },

我只想为 typeB 禁用 tooptip，但应该与 typeA 一起使用。这在谷歌图表中可能吗？ (tooptip trigger:none 选项禁用整个图表)

【问题讨论】：

标签： javascript google-visualization pie-chart gchart

【解决方案1】：

使用自定义工具提示时，如果工具提示列是null 或''

图表将替换为默认工具提示

为避免，提供一个用 css 隐藏的自定义工具提示

请参阅以下工作 sn-p...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Type', 'Percent'],
      ['typeA', 20],
      ['typeB', 80]
    ]);

    // add tooltip column
    data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});

    // build tooltip
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      switch (data.getValue(i, 0)) {

        // set visible tooltip
        case 'typeA':
          data.setValue(i, 2,
            '<div class="ggl-tooltip"><div><span>' +
            data.getValue(i, 0) + '</span></div><div>' +
            data.getValue(i, 1) + '</div></div>'
          );
          break;

        // set hidden tooltip
        case 'typeB':
          data.setValue(i, 2, '<div class="hdn-tooltip"><div>');
          break;
      }
    }

    var container = document.getElementById('chart_div');
    var pieChart = new google.visualization.PieChart(container);
    pieChart.draw(data, {
      tooltip: {
        isHtml: true
      }
    });
  },
  packages: ['corechart']
});

.hdn-tooltip {
  display: none;
  visibility: hidden;
}

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

.ggl-tooltip div {
  padding-top: 6px;
}

.ggl-tooltip span {
  font-weight: bold;
}

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

【讨论】：