Google विज़ुअलाइजेशन टूलटिप

Question

पर कस्टम टेक्स्ट जोड़ें मुझे अपने द्वारा प्रदर्शित किए जा रहे प्रत्येक टूलटिप्स (एक क्षेत्र चार्ट पर) पर टेक्स्ट की एक और पंक्ति में जोड़ने की आवश्यकता है। मैंने यह दिखाने के लिए एक स्क्रीनशॉट शामिल किया है कि मैं क्या करने की उम्मीद कर रहा हूं।

मेरा वर्तमान चार्ट: अतिरिक्त टेक्स्ट के साथ चार्ट जोड़ा गया। (यही वह है जो मैं करने की कोशिश कर रहा हूं):

मैं कस्टम टूलटिप्स के लिए किसी तृतीय पक्ष जेएस का उपयोग किए बिना ऐसा करने की उम्मीद कर रहा हूं। डिफ़ॉल्ट टूलटिप्स में प्रदर्शित होने के लिए टेक्स्ट-आधारित सामग्री की एक और पंक्ति जोड़ने का कोई तरीका है?

किसी भी मदद की बहुत सराहना की जाती है।

अतिरिक्त टूलटिप पंक्तियों के लिए आप क्या देख रहे हैं:

Answer 1

https://developers.google.com/chart/interactive/docs/roles#whatrolesavailable पर एक नज़र डालें!

उदाहरण:

 
label: 'Year', 'Sales', null, 'Expenses', null 
role: domain,  data, tooltip, data,  tooltip  
     '2004', 1000, '1M$ sales,  400, '$0.4M expenses 
          in 2004'     in 2004' 
     '2005', 1170, '1.17M$ sales, 460, '$0.46M expenses 
          in 2005'     in 2005' 
     '2006',  660, '.66$ sales, 1120,  '$1.12M expenses 
          in 2006'     in 2006' 
     '2007', 1030, '1.03M$ sales, 540, '$0.54M expenses 
          in 2007'     in 2007' 

Answer 2

आप विकल्पों में focusTarget: 'category' सक्षम करते हैं। फिर tooltip कॉलम वर्तमान x, y बिंदुओं के टूलटिप के लिए value बन जाता है (जो आपको इच्छित तरीके से प्रस्तुत किया जाता है)। तो आप value की नकल कर सकते हैं और इच्छित अतिरिक्त टेक्स्ट जोड़ सकते हैं।

google.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('string', 'Year'); 
    dataTable.addColumn('number', 'Sales'); 
    // A column for custom tooltip content 
    dataTable.addColumn({type: 'string', role: 'tooltip'}); 
    dataTable.addRows([ 
     ['2010', 600,'600: 15% growth'], 
     ['2011', 1500, '1500: 50% growth'], 
     ['2012', 800, '800: -40% growth'], 
     ['2013', 1000, '1000: 25% growth'] 
    ]); 

    var options = { legend: 'none', focusTarget: 'category'}; 
    var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_custom_tooltip')); 
    chart.draw(dataTable, options); 
    } 

Answer 3

मैं डिफ़ॉल्ट टूलटिप्स के लिए एक और डेटा पंक्ति जोड़ने के लिए एक रास्ता नहीं मिला है -: यहाँ एक उदाहरण मैं क्या मतलब है। एचटीएमएल टूलटिप्स का उपयोग करके आप जो खोज रहे हैं उसके करीब हो सकते हैं। हालांकि आप टूलटिप पर पूंछ खो देते हैं। यहाँ समाधान मैं प्रयोग किया जाता के साथ एक JSbin ... http://jsbin.com/tovizukabu/3/edit?css,js,output

google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('string', 'Year'); 
    dataTable.addColumn('number', 'Sales'); 
    dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}}); 
    dataTable.addColumn('number', 'Expense'); 
    dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}}); 

    dataTable.addRows([ 
     ['2010', 1500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 600,'<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$600</strong></div>'], 
     ['2011', 500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 1500, '<div><strong>2011</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$1,500</strong></div>'], 
     ['2012', 1200, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 800, '<div><strong>2012</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$800</strong></div>'], 
     ['2013', 500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 1000, '<div><strong>2013</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$1,000</strong></div>'] 
    ]); 

    var options = {tooltip: {isHtml: true}}; 
    var chart = new google.visualization.AreaChart (document.getElementById('tooltip_action')); 
    chart.draw(dataTable, options); 
    } 

और सीएसएस ...

.google-visualization-tooltip { 
border: solid 1px #bdbdbd; 
border-radius: 2px; 
background-color: white; 
position: absolute; 
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6); 
font-size: 11px; 
-moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6); 
-webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6); 
font-family: arial; 
} 

.google-visualization-tooltip div { 
    padding:5px; 
}