क्या मैं Google Geochart चार्ट में टूलटिप टेक्स्ट को कस्टमाइज़ कर सकता हूं?

Question

नीचे कोड है जिसका उपयोग मैं कर रहा हूं, a how to I found in Google's documentation पर आधारित है, लेकिन मुझे यकीन नहीं है कि यह Geochart पर लागू होता है, अगर मैं इसे सही कर रहा हूं, या यदि जिओचर्ट के लिए ऐसा करने का कोई अन्य तरीका है।

यदि कोड टूलटिप कॉलम शामिल नहीं है तो यह कोड ठीक काम करता है। जब मैं करता हूं, तो मुझे त्रुटि "असंगत डेटा तालिका: त्रुटि: तालिका में उम्मीद से अधिक कॉलम होते हैं (2 कॉलम की अपेक्षा)," प्रदर्शित किया गया जहां जिओचर्ट होना चाहिए।

This question एक ही समस्या को संबोधित करता है, लेकिन विशेष रूप से एक जिओचर्ट के लिए नहीं।

<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 टूल के साथ करने का प्रयास कर रहा था, उस पाठ को प्रारूपित करें।

टूलटिप दृश्य के साथ गाया मानचित्र

पीएचपी & जावास्क्रिप्ट कोड

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

मैं स्कैटर चार्ट के लिए एक समान समस्या में भाग गया। मुझे अन्य उत्तरों में सुझाए गए अनुसार DataTable() और addColumn() के विपरीत चार्ट में डेटा प्राप्त करने के लिए arrayToDataTable का उपयोग करना पड़ा।

इसे काम करने के लिए, आप arrrayToDataTable() पर कॉल करते हैं क्योंकि आप वर्तमान में कर रहे हैं और चर डेटा को सहेज रहे हैं।

फिर, आपको यह निर्दिष्ट करने की आवश्यकता है कि आप किस कॉलम को टूलटिप के रूप में माना जाना चाहते हैं (और आपको यह निर्दिष्ट करना होगा कि कौन से कॉलम प्लॉट किए जाने चाहिए)। निम्न उदाहरण में, कॉलम 0 और 1 में साजिश डेटा होता है, और कॉलम 2 में टूलटिप स्ट्रिंग्स होते हैं।

chart.draw(view, options); 

Answer 5

टूलटिप नई लाइन सहित एचटीएमएल उपयोग करने के लिए अनुकूलित करने के लिए आदेश में/छवियों कृपया जाँच:

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

अंत में, आप कॉल दृश्य चर के साथ के बजाय डेटा चर के साथ आकर्षित करने के लिए करना चाहिए इस उदाहरण: 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 के बाद से टूलटिप्स

के लिए एचटीएमएल का समर्थन करता है