如何自定义Google可视化地理图表工具提示

Question

如何自定义Google可视化地理图表工具提示

4

我有一个Google Geochart（也可在JSFiddle 这里找到）：

我需要怎样才能去掉工具提示中的多余空格：

<html>
    <head>
        <script type='text/javascript' src='https://www.google.com/jsapi'></script>
        <script type='text/javascript'>
            google.load('visualization', '1', {'packages': ['geochart'],'callback': drawVisualization});

            function drawVisualization() {

                var data = new google.visualization.DataTable();
                data.addColumn('number', 'latitude');
                data.addColumn('number', 'longitude');
                data.addColumn('string', 'Country');
                data.addColumn('number', 'Fans');
                data.addColumn({type: 'string',role: 'tooltip'});
                data.addRow([14.38, -90.33, '', 229, 'Guatemala City!']);
                data.addRow([38.8339, -104.8214, '', 500, 'Colorado Springs!']);

                var options = {};
                var chart = new google.visualization.GeoChart(document.getElementById('my_chart'));
                chart.draw(data, options);

            };

        </script>
    </head>
    <body>
        <div id="my_chart" style="width: 100%; height: 100%;  "></div>
    </body>
</html>

- M Schenkel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Manjunath Siddappa · Accepted Answer

已完成

工作的范例

http://jsfiddle.net/maL943us/6/

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


        function drawVisualization() {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'latitude');
        data.addColumn('number', 'longitude');
        data.addColumn('string', 'Country');

        data.addColumn('number', 'Fans');
        data.addColumn({
            type: 'string',
            role: 'tooltip',
            'p': {'html': true}//added html version
        });
        data.addRow([14.38, -90.33, '', 229, 'Guatemala City!']);//added div tag with inline style
        data.addRow([38.8339, -104.8214, '', 500, '<div style="background-color:yellow;margin:0; padding:0;">Colorado Springs!</div>']);

        var options = {tooltip: {isHtml: true}};//added html version

        var chart = new google.visualization.GeoChart(document.getElementById('col_chart_html_tooltip'));
        chart.draw(data, options);

    };

html

<div id='col_chart_html_tooltip'></div>

CSS（使用！important覆盖自定义工具提示样式）

.google-visualization-tooltip {
  border:solid 1px #000!important;
  border-radius: 2px;
  background-color: white;
  position: absolute;
  font-size: 12px;
  padding: 0px;
    margin:0!important;
}
.google-visualization-tooltip-item-list {
  list-style-type: none;
  margin: 0!important;
  padding: 0!important;
}

.google-visualization-tooltip-item:first-child {
  margin: 0!important;
}
.google-visualization-tooltip-item {
  margin: 0!important;
  padding: 0!important;
}