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

请参阅以下工作片段，我删除了一些不必要的代码...

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 ...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.

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

这将仅更改load 语句，请参阅上面的代码片段。