如何在谷歌圖表中刪除工具提示

Question

我正在研究Google圖表，但遇到了一些問題

我正在繪制一個多於10個數據的甜甜圈圖，所以當數據顯示的寬度超過它時，會在工具提示中顯示該情況，例如

我不要

我正在嘗試做的事情就像有多少標頭一樣，讓它不要將其推入工具提示中

 google.charts.load('current', { 'packages': ['corechart'], 'language': 'hi_IN' }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ["Outlet", "Amount"], ["S0001", 7153214], ["S0002", 1319026], ["S0003", 1497004], ["S0004", 1597004], ["S0005", 1697004], ["S0006", 1797004], ["S0007", 1897004], ["S0008", 13897004], ["S0009", 2097004], ["S0010", 1597004], ["S00011", 1698604] ]); var options = { pieHole: 0.6, legend: { position: 'right', }, width: 'auto', height: 'auto' }; var chart = new google.visualization.PieChart(document.getElementById('donutchart')); chart.draw(data, options); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="donutchart" style="width: 100%; height: 550px;"></div> 

我不想刪除這些圖例，我只想一次顯示它們，而是顯示在工具提示中，用戶必須單擊以查看其他圖例

檢查數據

[["Outlet","Amount"],["CHEF BAKERS BROOKFIELD",738999],["CHEF BAKERS ARAKERE",106050],["CHEF BAKERS AMEENPUR",89358],["CHEF BAKERS AYYAPPA NGR",80088],["Chef Bakers Bellandur",321705],["CHEF BAKERS BRIGADE METROPOLIS",65088],["CHEF BAKERS BAGMANE CBP",145432],["CHEF BAKERS CHANDAPURA",92830],["DIVYA SREE TECHNO PARK",82946],["Chef Bakers Doddanekkundi",92590],["CHEF BAKERS SIDDAPURA",115142],["CHEF BAKERS ECITY",163745],["CHEF BAKERS VYDEHI",84367],["CHEF BAKERS HARLUR ROAD",101337],["Chef Bakers Hennur Main Road",18045],["CHEF BAKERS HSR LAYOUT",358232],["CHEF BAKERS BOTANICAL GARDEN",22256],["CHEF BAKERS KADUBEESANAHALLI",277964],["CHEF BAKERS COFFEE BOARD",164906],["Chef Bakers Kaggadasapura",73045],["Chef Bakers Koramangala",79381],["CHEF BAKERS KASAVANAHALLI",424056],["Chef Bakers Marathahalli 1",115410],["Chef bakers Marathahalli 2",105703],["Chef Bakers Mahadevapura",209014],["CHEF BAKERS BEL LAYOUT",58661],["CHEF BAKERS MG ROAD",70005],["CHEF BAKERS MANYATA TECH PARK",105590],["CHEF BAKERS NAGAWARA",47832],["CHEF BAKERS PRESTIGE SHANTHINIKETAN",135772],["CHEF BAKERS PRITECH",301201],["RGA TECH PARK",64525],["CHEF BAKERS RAMANTHAPUR",62752],["CHEF BAKERS RR NAGAR",94200],["Chef Bakers Kadugodi",353045],["CHEF BAKERS SARJAPURA ROAD",84425],["CHEF BAKERS SINGASANDRA",60735],["CHEF BAKERS SPICE GARDEN",135243],["Chef Bakers Whitefield",427212],["CHEF BAKERS YELAHANKA",293061]]

Answer 1

您可以使用選項-> legend.maxLines
為圖例添加更多行。

注意：此選項僅適用於-> legend.position = top

請參閱以下工作片段...

 google.charts.load('current', { 'packages': ['corechart'], 'language': 'hi_IN' }).then(function () { var data = google.visualization.arrayToDataTable([ ["Outlet", "Amount"], ["S0001", 7153214], ["S0002", 1319026], ["S0003", 1497004], ["S0004", 1597004], ["S0005", 1697004], ["S0006", 1797004], ["S0007", 1897004], ["S0008", 13897004], ["S0009", 2097004], ["S0010", 1597004], ["S00011", 1698604] ]); var options = { pieHole: 0.6, legend: { position: 'top', maxLines: 5 }, width: 'auto', height: 'auto' }; var chart = new google.visualization.PieChart(document.getElementById('donutchart')); chart.draw(data, options); }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="donutchart" style="width: 100%; height: 550px;"></div> 

Answer 2

您可能想嘗試一下，

legend: {
  position: 'top',
  maxLines: data.getNumberOfRows()
}

要么

legend: {
  position: 'top',
  maxLines: data.getNumberOfRows()/4
}

這樣做將始終為您提供足夠的行數，以便您可以將所有圖例放在一頁上，而不必滾動

 google.charts.load('current', { 'packages': ['corechart'], 'language': 'hi_IN' }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ["Outlet", "Amount"], ["S0001", 7153214], ["S0002", 1319026], ["S0003", 1497004], ["S0004", 1597004], ["S0005", 1697004], ["S0006", 1797004], ["S0007", 1897004], ["S0008", 13897004], ["S0009", 2097004], ["S0010", 1597004], ["S00011", 1698604], ["S00012", 1698604], ["S00013", 1698604], ["S00014", 1698604], ["S00015", 1698604], ["S00016", 1698604], ["S00017", 1698604], ["S00018", 1698604], ["S00019", 1698604] ]); var options = { pieHole: 0.3, legend: { position: 'top', maxLines: data.getNumberOfRows() }, width: 'auto', height: 'auto' }; var chart = new google.visualization.PieChart(document.getElementById('donutchart')); chart.draw(data, options); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="donutchart" style="width: 100%; height: 550px;"></div> 

Answer 3

該問題是由於圖表中的圖例占用的空間大於包含元素中可用的空間所致。

如果要刪除圖例，我不建議您刪除圖例，因為沒有它，圖表將變得非常不清楚，您可以在設置中設置position: 'none' 。

var options = {
  pieHole: 0.6,
  legend: {
    position: 'none',
  },
  width: 'auto',
  height: 'auto'
};