Google चार्ट: संपूर्ण कॉलम के लिए एक टूलटिप

Question

मेरे पास Google Charts का उपयोग करके एक मूल क्षेत्र चार्ट है। मैं ग्राफ पर प्रत्येक बिंदु के लिए टूलटिप्स सेट अप करने में सक्षम हूं, लेकिन कॉलम में सभी बिंदुओं के लिए एक टूलटिप रखने का कोई तरीका है।

आप देख सकते हैं कि जब कर्सर ग्राफ़ के किसी बिंदु खत्म हो गया है, एक खड़ी रेखा तैयार की है और एक टूलटिप प्रदर्शित करता है सभी डेटा का वर्णन करने के:

यहाँ वांछित व्यवहार का एक स्क्रीनशॉट उस कॉलम में (दोनों लाइनों के लिए डेटा)। यदि आवश्यक हो तो यहां live example देखें।

क्या यह Google चार्ट के साथ प्राप्त किया जा सकता है?

Answer 1

सभी आप अपने विकल्पों के लिए निम्न जोड़ने है (एक लाइन चार्ट के मामले में) क्या करने की जरूरत: focusTarget: 'category'

यहाँ एक उदाहरण (बस Google Playground खुला है और अंत में विकल्प के लिए ऊपर पंक्ति जोड़ें):

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'], 
    ['A', 1,  1,   0.5], 
    ['B', 2,  0.5,   1], 
    ['C', 4,  1,   0.5], 
    ['D', 8,  0.5,   1], 
    ['E', 7,  1,   0.5], 
    ['F', 7,  0.5,   1], 
    ['G', 8,  1,   0.5], 
    ['H', 4,  0.5,   1], 
    ['I', 2,  1,   0.5], 
    ['J', 3.5,  0.5,   1], 
    ['K', 3,  1,   0.5], 
    ['L', 3.5,  0.5,   1], 
    ['M', 1,  1,   0.5], 
    ['N', 1,  0.5,   1] 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
     draw(data, {curveType: "function", 
        width: 500, height: 400, 
        vAxis: {maxValue: 10}, 
    // This line will make you select an entire row of data at a time 
        focusTarget: 'category' 
       } 
     ); 
} 

पाई के रूप में आसान! अधिक जानकारी के लिए focusTarget in the Google Documentation

आप और अधिक जटिल कुछ, आप domain Data Role

यहाँ के साथ बेला के आसपास कर सकते हैं देखने के कोड का एक नमूना सा है:

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

google.setOnLoadCallback(drawChart_C6); 

    function drawChart_C6() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn({type: 'string', role: 'domain'}, '2009 Quarter'); 
    data.addColumn('number', '2009 Sales'); 
    data.addColumn('number', '2009 Expenses'); 
    data.addColumn({type: 'string', role: 'domain'}, '2008 Quarter'); 
    data.addColumn('number', '2008 Sales'); 
    data.addColumn('number', '2008 Expenses'); 
    data.addRows([ 
     ['Q1 \'09', 1000, 400, 'Q1 \'08', 800, 300], 
     ['Q2 \'09', 1170, 460, 'Q2 \'08', 750, 400], 
     ['Q3 \'09', 660, 1120, 'Q3 \'08', 700, 540], 
     ['Q4 \'09', 1030, 540, 'Q4 \'08', 820, 620] 
    ]); 

    var chart = new google.visualization.LineChart(document.getElementById('chart_C6')); 
    chart.draw(data, {width: 400, height: 240, legend:'right', focusTarget: 'category'}); 
    }