2013-01-10 14 views
6

मैं एक स्टैक्ड बार चार्ट के लिए कस्टम टूलटिप प्राप्त करने का प्रयास कर रहा हूं।Google विज़ुअलाइजेशन एपीआई - स्टैक्ड बार चार्ट - कस्टम टूलटिप

var data = new google.visualization.DataTable(); 
data.addColumn('string', 'Units'); 
data.addColumn('number', '1'); 
data.addColumn('number', '2'); 
data.addColumn('number', '3'); 
data.addColumn('number', '4'); 

_1 = 0.123 
_2 = 0.23 
_3 = 0.3 
_4 = 0 

data.addRow([_units, _1, _2, _3, _4,]); 

var options = { 
     isStacked: true, 
     height: 150, 
     chartArea: { height: 50 }, 
     legend: { position: 'top' }, 
}; 

bchart = new google.visualization.BarChart(bcontainer); 
bchart.draw(data, options); 

मेरा प्रश्न यह है कि प्रत्येक के लिए टूलटिप कैसे बनाएं: _1, _2, _3, _4?

धन्यवाद

उत्तर

11

यह DataTable Roles

बार चार्ट प्रलेखन में के अंतर्गत Google प्रलेखन में कवर किया जाता है, यह बताते हैं जो भूमिकाओं कि चार्ट here

आप क्या करने की जरूरत अतिरिक्त जोड़ने के लिए उपलब्ध हैं {row: tooltip} के साथ आपके डेटा में कॉलम जोड़े गए हैं, उस कॉलम के साथ यह दिखा रहा है कि आप टूलटिप कहां चाहते हैं।

उदाहरण के लिए:

var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Year'); 
    data.addColumn('number', 'Sales'); 
    data.addColumn({type: 'string', role: 'tooltip'}); 
    data.addColumn('number', 'Expenses'); 
    data.addColumn({type: 'string', role: 'tooltip'}); 
    data.addRows([ 
    ['2004', 1000, '1M$ sales in 2004', 400, '$0.4M expenses in 2004'], 
    ['2005', 1170, '1.17M$ sales in 2005', 460, '$0.46M expenses in 2005'], 
    ['2006', 660, '.66$ sales in 2006', 1120, '$1.12M expenses in 2006'], 
    ['2007', 1030, '1.03M$ sales in 2007', 540, '$0.54M expenses in 2007'] 
    ]); 

अंतिम कोड इस तरह दिखेगा:

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Year'); 
    data.addColumn('number', 'Sales'); 
    data.addColumn({type: 'string', role: 'tooltip'}); 
    data.addColumn('number', 'Expenses'); 
    data.addColumn({type: 'string', role: 'tooltip'}); 
    data.addRows([ 
    ['2004', 1000, '1M$ sales in 2004', 400, '$0.4M expenses in 2004'], 
    ['2005', 1170, '1.17M$ sales in 2005', 460, '$0.46M expenses in 2005'], 
    ['2006', 660, '.66$ sales in 2006', 1120, '$1.12M expenses in 2006'], 
    ['2007', 1030, '1.03M$ sales in 2007', 540, '$0.54M expenses in 2007'] 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.BarChart(document.getElementById('visualization')). 
     draw(data, 
      {title:"Yearly Coffee Consumption by Country", 
      isStacked: true, 
      width:600, height:400, 
      vAxis: {title: "Year"}, 
      hAxis: {title: "Sales"}} 
    ); 
} 

एक उदाहरण here देखें।

+0

मैंने कल इसे समझने की कोशिश कर इस पर घंटों बिताए। आपका बहुत बहुत धन्यवाद। –

संबंधित मुद्दे