我可以自定義Google Geochart圖表中的工具提示文本嗎？

Question

下面是我使用的基礎上，a how to I found in Google's documentation的代碼，但我不知道它是否適用於Geochart，如果我做的是正確的，或者有一些其他的方式來做到這一點的Geochart。如果我不包括工具提示欄

此代碼工作正常。當我這樣做，我得到錯誤「不兼容的數據表：錯誤：表包含比預期更多的列（預計2列），」顯示Geochart應該在哪裏。

This question解決同樣的問題，但沒有具體的Geochart。

<script type='text/javascript' src='https://www.google.com/jsapi'></script> 
<script type='text/javascript'> 

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

    function drawRegionsMap() 
    { 

     var data = google.visualization.arrayToDataTable([ 
      [ 'State', 'Relevance', {type: 'string', role: 'tooltip'} ], 
      [ 'Alabama', 3, 'tooltip test text' ], 
      [ 'Arizona', 1, 'tooltip test text' ], 
     ]); 

     var options = 
     { 
      region:   'US', 
      resolution:  'provinces', 
     }; 

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

    }; 

</script> 

Answer 1

現在看來似乎是不可能的使用GeoChart工具以正確的方式格式化文本。下面是我終於想出瞭解決方案和呈現的映像：

呈現的映像與工具提示查看

PHP & JavaScript代碼

<!-- generate geo map --> 
<script type='text/javascript' src='https://www.google.com/jsapi'></script> 
<script type='text/javascript'> 

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

    function drawRegionsMap() 
    { 

     // create data table 
     var data = google.visualization.arrayToDataTable([ 
      <?php echo $data_table; ?> 
     ]); 

     // create chart object 
     var chart = new google.visualization.GeoChart(
      document.getElementById('chart_div') 
     ); 

     // defines the data for the tooltip 
     var formatter = new google.visualization.PatternFormat('{0}'); 
     formatter.format(data, [0,1], 1); 
     var formatter = new google.visualization.PatternFormat('{2}'); 
     formatter.format(data, [0,1,2], 0); 

     // defines the data for the chart values 
     var view = new google.visualization.DataView(data); 
     view.setColumns([0, 1]); 

     // set options for this chart 
     var options = 
     { 
      width:   <?php echo $width; ?>, 
      region:   'US', 
      resolution:  'provinces', 
      colorAxis: { colors: ['#abdfab', '#006600'] }, 
      legend: 'none' 
     }; 

     // draw chart 
     chart.draw(view, options); 

    }; 

</script> 

<div id="chart_div" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px;"></div> 

渲染HTML

<script type='text/javascript' src='https://www.google.com/jsapi'></script> 
<script type='text/javascript'> 

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

    function drawRegionsMap() 
    { 

     // create data table 
     var data = google.visualization.arrayToDataTable([ 
      [ 'State', 'in', 'String' ], 
      [ 'Arizona', 2, 'Has Facility, Sells Direct' ], 
      [ 'California', 4, 'Has Facility, Has Distributor, Sells Direct' ], 
      [ 'Colorado', 1, 'Sells Direct' ], 
      [ 'Florida', 1, 'Has Distributor' ], 
      [ 'Georgia', 1, 'Has Distributor' ], 
      [ 'Idaho', 1, 'Sells Direct' ], 
      [ 'Illinois', 1, 'Has Distributor' ], 
      [ 'Indiana', 1, 'Has Distributor' ], 
      [ 'Iowa', 1, 'Has Distributor' ], 
      [ 'Kansas', 1, 'Has Distributor' ], 
      [ 'Kentucky', 1, 'Has Distributor' ], 
      [ 'Louisiana', 1, 'Has Distributor' ], 
      [ 'Maryland', 2, 'Has Distributor' ], 
      [ 'Montana', 1, 'Sells Direct' ], 
      [ 'Nevada', 2, 'Has Facility, Sells Direct' ], 
      [ 'New Mexico', 2, 'Has Facility, Sells Direct' ], 
      [ 'North Carolina', 1, 'Has Distributor' ], 
      [ 'North Dakota', 1, 'Has Distributor' ], 
      [ 'Oklahoma', 1, 'Sells Direct' ], 
      [ 'Oregon', 1, 'Sells Direct' ], 
      [ 'Pennsylvania', 1, 'Has Distributor' ], 
      [ 'South Carolina', 1, 'Has Distributor' ], 
      [ 'Tennessee', 1, 'Has Distributor' ], 
      [ 'Texas', 1, 'Has Distributor' ], 
      [ 'Utah', 2, 'Has Facility, Sells Direct' ], 
      [ 'Washington', 1, 'Sells Direct' ], 
      [ 'Wyoming', 1, 'Sells Direct' ],  ]); 

     // create chart object 
     var chart = new google.visualization.GeoChart(
      document.getElementById('chart_div') 
     ); 

     // defines the data for the tooltip 
     var formatter = new google.visualization.PatternFormat('{0}'); 
     formatter.format(data, [0,1], 1); 
     var formatter = new google.visualization.PatternFormat('{2}'); 
     formatter.format(data, [0,1,2], 0); 

     // defines the data for the chart values 
     var view = new google.visualization.DataView(data); 
     view.setColumns([0, 1]); 

     // set options for this chart 
     var options = 
     { 
      width:   286, 
      region:   'US', 
      resolution:  'provinces', 
      colorAxis: { colors: ['#abdfab', '#006600'] }, 
      legend: 'none' 
     }; 

     // draw chart 
     chart.draw(view, options); 

    }; 

</script> 

<div id="chart_div" style="width: 286px; height: 180px;"></div> 

Answer 2

有在this thread

• Set the formatted value of your data points manually (using the #setFormattedValue() DataTable method)
• Use one of the formatters on a DataTable column
• Include a ' tooltip ' role column in the DataTable

提出了三個備選方案我親自使用第一個，和你的榜樣應該像

var data = google.visualization.arrayToDataTable([ 
    [ 'State', 'Relevance' ], 
    [ 'Alabama', { v: 3, f: 'tooltip test text' } ], 
    [ 'Arizona', { v: 1, f: 'tooltip test text' } ], 
]); 

Answer 3

我能夠包括我在提示想要的文本，包括價值觀是這樣的：

var data = new google.visualization.DataTable(); 
data.addColumn('string', 'Country'); // Implicit domain label col. 
data.addColumn('number', 'Value'); // Implicit series 1 data col. 
data.addColumn({type:'string', role:'tooltip'}); // 

data.addRows([ 

    [{v:"US",f:"United States of America"},1,"21% of Visits"], 

    [{v:"GB",f:"United Kingdom"},2,"7% of visits"], 

    [{v:"DE",f:"Germany"},3,"6% of visits"], 

    [{v:"FR",f:"France"},4,"5% of visits"], 

    [{v:"ES",f:"Spain"},5,"5% of visits"], 

    [{v:"CA",f:"Canada"},6,"4% of visits"], 

    [{v:"IT",f:"Italy"},7,"4% of visits"], 

    [{v:"NL",f:"The Netherlands"},8,"4% of visits"], 

    [{v:"BR",f:"Brazil"},9,"4% of visits"], 

    [{v:"TR",f:"Turkey"},10,"3% of visits"], 

    [{v:"IN",f:"India"},11,"3% of visits"], 

    [{v:"RU",f:"Russia"},12,"3% of visits"], 

    [{v:"AU",f:"Australia"},13,"2% of visits"], 

]); 

這種方式，例如「美國」將是提示的1號線，「21％的訪問」將成爲第二條線。使用這種格式，我可以在工具提示中包含我想要的任何文本。

Answer 4

我遇到了散點圖類似的問題。我必須使用arrayToDataTable才能將數據導入到圖表中，而不是像其他答案中所建議的DataTable()和addColumn()。

爲了得到它的工作，你打這個電話給arrrayToDataTable()，你正在做，並保存到可變數據。

然後，你需要指定要被當作一個工具提示，列（你必須指定哪些列應該被繪製爲好）。在以下示例中，第0列和第1列包含繪圖數據，第2列包含工具提示字符串。

var view = new google.visualization.DataView(data); 
view.setColumns([0, 1, {sourceColumn: 2,role:'tooltip'}]); 

最後，你必須撥打電話與視圖變量，而不是用數據變量得出：

chart.draw(view, options); 

Answer 5

爲了自定義使用HTML，包括新的生產線的工具提示/圖片，請檢查這個例子： http://jsfiddle.net/SD4KA/

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

function drawVisualization() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Country', 'Value', {role: 'tooltip', p:{html:true}}], 
     ['Russia', 5, 'Hello world<br>test'], 
     ['US', 20, '<img src="https://www.google.com/images/srpr/logo6w.png"/>']]); 
    var chart = new google.visualization.GeoChart(document.getElementById('visualization')); 
    chart.draw(data, { 
     width: 800, 
     height: 600, 
     tooltip: { 
      isHtml: true 
     } 
    }); 
} 

由於V1.1 geochart支持工具提示

的html