Google Geochart如何在右指針顯示工具提示框

Question

這是我的項目的演示。

https://jsfiddle.net/UdonX/6hra8Lw9/

google.load('visualization','1', {'packages':['geochart']});

    google.setOnLoadCallback(drawVisualization);

通常，工具提示框顯示在指針的左側，但是我的客戶希望顯示在指針的右側。 我該如何更改？

Answer 1

為了使示例工作起來，需要對GeoChart進行一些調整

首先，工具提示必須使用html。 默認情況下，工具提示是使用svg繪制的。
添加此圖表選項...

tooltip: {isHtml: true}

接下來，需要添加subtree: true對觀察者為subtree: true

參見以下工作片段，我刪除了一些不必要的代碼...

 google.charts.load('current', {packages:['corechart']}); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var data = google.visualization.arrayToDataTable([ ['State', 'Value'], [{v:"VN-54",f:"Bac Giang"}, null], [{v:"VN-53",f:"Bac Kan"}, null], [{v:"VN-04",f:"Cao Bang"}, null], [{v:"VN-03",f:"Ha Giang"}, null], [{v:"VN-09",f:"Lang Son"}, null], [{v:"VN-68",f:"Phu Tho"}, null], [{v:"VN-13",f:"Quang Ninh"}, null], [{v:"VN-69",f:"Thai Nguyen"}, null], [{v:"VN-07",f:"Tuyen Quang"}, null], [{v:"VN-02",f:"Lao Cai"}, null], [{v:"VN-06",f:"Yen Bai"}, null], [{v:"VN-71",f:"Dien Bien"}, null], [{v:"VN-14",f:"Hoa Binh"}, null], [{v:"VN-01",f:"Lai Chau"}, null], [{v:"VN-05",f:"Son La"}, null], [{v:"VN-56",f:"Bac Ninh"}, null], [{v:"VN-63",f:"Ha Nam"}, null], [{v:"VN-61",f:"Hai Duong"}, null], [{v:"VN-66",f:"Hung Yen"}, null], [{v:"VN-67",f:"Nam Dinh"}, 20], [{v:"VN-18",f:"Ninh Binh"}, null], [{v:"VN-20",f:"Thai Binh"}, null], [{v:"VN-70",f:"Vinh PHuc"}, null], [{v:"VN-HN",f:"Ha Noi"}, null], [{v:"VN-HP",f:"Hai Phong"}, null], [{v:"VN-23",f:"Ha Tinh"}, null], [{v:"VN-22",f:"Nghe An"}, null], [{v:"VN-24",f:"Quang Binh"}, 28], [{v:"VN-25",f:"Quang Tri"}, null], [{v:"VN-21",f:"Thanh Hoa"}, 30], [{v:"VN-26",f:"Thua Thien-Hue"}, 31], [{v:"VN-33",f:"Dak Lak"}, null], [{v:"VN-72",f:"Dak Nong"}, null], [{v:"VN-30",f:"Gia Lai"}, null], [{v:"VN-28",f:"Kon Tum"}, null], [{v:"VN-35",f:"Lam Dong"}, null], [{v:"VN-31",f:"Binh Dinh"}, null], [{v:"VN-40",f:"Binh Thuan"}, null], [{v:"VN-34",f:"Khanh Hoa"}, null], [{v:"VN-36",f:"Ninh Thuan"}, null], [{v:"VN-32",f:"Phu Yen"}, null], [{v:"VN-27",f:"Quang Nam"}, 42], [{v:"VN-29",f:"Quang Ngai"}, 43], [{v:"VN-43",f:"Ba Ria-Vung Tau"}, null], [{v:"VN-57",f:"Binh Duong"}, null], [{v:"VN-58",f:"Binh Phuoc"}, null], [{v:"VN-39",f:"Dong Nai"}, null], [{v:"VN-37",f:"Tay NInh"}, null], [{v:"VN-SG",f:"Ho Chi Minh City"}, null], [{v:"VN-44",f:"An Giang"}, null], [{v:"VN-55",f:"Bac Lieu"}, null], [{v:"VN-50",f:"Ben Tre"}, null], [{v:"VN-59",f:"Ca Mau"}, 54], [{v:"VN-45",f:"Dong Thap"}, null], [{v:"VN-73",f:"Hau Giang"}, null], [{v:"VN-47",f:"Kien Giang"}, null], [{v:"VN-41",f:"Long An"}, null], [{v:"VN-52",f:"Soc Trang"}, null], [{v:"VN-46",f:"Tien Giang"}, null], [{v:"VN-51",f:"Tra vinh"}, null], [{v:"VN-49",f:"Vinh Long"}, null], [{v:"VN-CT",f:"Can Tho"}, null], [{v:"VN-DN",f:"Da Nang"}, null] ]); var opts = { region: 'VN', displayMode: 'region', resolution: 'provinces', colorAxis: {colors: ['#f03434','#03c9a9']}, datalessRegionColor: '#ececec', defaultColor: 'white', backgroundColor:'#bfbfbf', keepAspectRatio:true, legend:'none', tooltip: {isHtml: true} }; var geochart = new google.visualization.GeoChart(document.getElementById('visualization')); google.visualization.events.addOneTimeListener(geochart, 'ready', function () { var container = document.querySelector('#visualization > div:last-child'); function setPosition() { var tooltip = container.querySelector('.google-visualization-tooltip'); if (tooltip !== null) { var adjustLeft = 176; var left = parseFloat(tooltip.style.left) + adjustLeft; tooltip.style.left = left + 'px'; } } var observer = new MutationObserver(setPosition); observer.observe(container, { childList: true, subtree: true }); }); geochart.draw(data, opts); }; 

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

請注意 ，不應再使用腳本庫jsapi 。

<script src="https://www.google.com/jsapi"></script>

請參閱發行說明 ...

可以通過jsapi加載程序保留的Google圖表版本不再保持一致更新。 從現在開始，請使用新的gstatic loader.js 。

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

這只會更改load語句，請參見上面的代碼段。

Answer 2

\n

\n

\n

.google-visualization-tooltip {  position:relative !important; top:0 !important;right:0 !important; z-index:+1;}

\n

\n

\n