2016-10-11 10 views

答えて

1

、チャートが提供する、避けるために、デフォルトのツールチップ

と交換します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>

関連する問題