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添加到观察者

请参阅下面的工作 sn-p，我已经删除了一些不必要的代码...

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>

见release notes...

通过 jsapi 加载程序仍然可用的 Google Charts 版本不再持续更新。从现在开始请使用新的 gstatic loader.js。

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

这将仅更改load 语句，参见上面的sn-p。

Answer 2

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