Удаления подсказки для одной части PieChart Google диаграммы

Question

У меня есть структура диаграммы, как это: -

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

Я хочу, чтобы отключить tooptip только для TypeB и но должны работать с TypeA. Возможно ли это в диаграммах Google? (Триггер tooptip: нет опции отключить для всей диаграммы)

Answer 1

при использовании пользовательских подсказок, если столбец подсказки 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>