删除部分piechart谷歌图表的工具提示

Removing tooltip for one part of piechart google charts

本文关键字：工具提示谷歌 piechart 删除部更新时间：2023-09-26

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

               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
                                }
                            ]
                        }
                    ]
                },

我想禁用标题提示仅为类型b，但应该与类型a工作。这在谷歌排行榜上可能吗?(tooptip trigger:none选项在整个图表中禁用它)

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

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

要避免使用

，请提供一个自定义的工具提示，该工具提示隐藏在CSS

中

请参阅下面的工作代码片段…

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>