2017-12-12 7 views
5

मैं Google गेज के नीचे के लेबल को नीचे प्रिंट करने की कोशिश कर रहा हूं (केवल संबंधित गेज के नीचे)। इसके अलावा, मैं दो गेज के लिए दो अलग-अलग प्रत्यय प्रदान करना चाहता हूं। मैंने अलग-अलग डेटा (डेटा 1 और डेटा 2) के लिए अलग फॉर्मेटर्स (फॉर्मेटर 1, फॉर्मेटर 2) देने का प्रयास किया है, लेकिन यह गेज (कोई त्रुटि नहीं) को भी चित्रित नहीं कर रहा है। इस मामले में, draw_data_guage में चौथा तर्क होगा।गेज के बाहर Google गेज के निचले लेबल को कैसे मुद्रित करें?

var e = document.getElementById('draw_chart'); 
 
e.onclick = draw_data_gauge(80, 68, '%'); 
 

 
function draw_data_gauge(cpu_data, memory_data, suffix) { 
 
    console.log("in guage") 
 
    google.charts.load('current', { 
 
    'packages': ['gauge'] 
 
    }); 
 
    google.charts.setOnLoadCallback(drawChart); 
 

 
    function drawChart() { 
 
    var data1 = google.visualization.arrayToDataTable([ 
 
     ['Label', 'Value'], 
 
     ['CPU', cpu_data], 
 
     ['Memory', memory_data], 
 
    ]); 
 
    var options = { 
 
     width: 500, 
 
     height: 150, 
 
     redFrom: 90, 
 
     redTo: 100, 
 
     yellowFrom: 75, 
 
     yellowTo: 90, 
 
     minorTicks: 5, 
 
    }; 
 
    var formatter1 = new google.visualization.NumberFormat({ 
 
     suffix: suffix, 
 
    }); 
 
    formatter1.format(data1, 1); 
 
    var chart = new google.visualization.Gauge(document.getElementById('chart_div')); 
 

 
    chart.draw(data1, options); 
 
    } 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 

 
<input name="Button" type="button" value="Draw" id="draw_chart" /> 
 

 
<div id="chart_div"></div>

मैं गेज के नीचे लेबल बाहर प्रदर्शित और दोनों गेज के लिए अलग प्रत्यय देने में सक्षम हो जाना चाहते हैं। इस jsfiddle link पर विचार करें। मैं उनके नीचे गेज के बाहर प्रतिशत (नीचे लेबल) प्रदर्शित करना चाहता हूं। मेरा jsfiddle लिंक here है। अग्रिम में धन्यवाद।

+0

आपकी समस्या का एक बेवकूफ कामकाजी लिंक बनाएं, ताकि अन्य लोग आपको संभावित समाधान –

+0

पता कर सकें। मैंने संदर्भ के लिए एक jsfiddle लिंक शामिल किया है @ अनंत सिंह – phanny

+0

क्या आपका मतलब प्रतिशत प्रतिशत है? इसके अलावा, 'अलग प्रत्यय' से आपका क्या मतलब है? उदाहरण के लिए क्या? '%' बनाम 'केबीपीएस'? –

उत्तर

2

ग्राफ को अलग करने की आपकी दिशा सही है। यहां ऐसा करने के लिए है:

div { 
 
    display: inline-block; 
 
}
<script type='text/javascript' src='https://www.google.com/jsapi'></script> 
 
<script type="text/javascript"> 
 
    google.load('visualization', '1', { 
 
    packages: ['gauge'] 
 
    }); 
 
    google.setOnLoadCallback(drawChart); 
 

 
    function drawChart() { 
 

 
    var options = { 
 
     width: 400, 
 
     height: 120, 
 
     redFrom: 90, 
 
     redTo: 100, 
 
     yellowFrom: 75, 
 
     yellowTo: 90, 
 
     minorTicks: 5 
 
    }; 
 

 
    var source = [{ 
 
     data: ['Memory', 80], 
 
     suffix: '%' 
 
     }, 
 
     { 
 
     data: ['CPU', 55], 
 
     suffix: '?' 
 
     }, 
 
     { 
 
     data: ['Network', 68], 
 
     suffix: '$' 
 
     }, 
 
    ]; 
 

 
    source.map((item, index) => { 
 
     var data = google.visualization.arrayToDataTable([ 
 
     ['Label', 'Value'], 
 
     item.data 
 
     ]); 
 

 
     var formatter = new google.visualization.NumberFormat({ 
 
     suffix: item.suffix, 
 
     fractionDigits: 0 
 
     }); 
 
     formatter.format(data, 1); 
 

 
     document.body.innerHTML += '<div id="chart_div_' + index + '"></div>'; 
 
     var chart = new google.visualization.Gauge(document.getElementById('chart_div_' + index)); 
 
     chart.draw(data, options); 
 
    }); 
 

 

 
    // dynamic update, randomly assign new values and redraw 
 
    //setInterval(function() { 
 
    // data.setValue(0, 1, 40 + Math.round(60 * Math.random())); 
 
    // formatter.format(data, 1); 
 
    // chart.draw(data, options); 
 
    //}, 1000); 
 
    // 
 
    //setInterval(function() { 
 
    // data.setValue(1, 1, 40 + Math.round(60 * Math.random())); 
 
    // chart.draw(data, options); 
 
    //}, 1000); 
 
    // 
 
    //setInterval(function() { 
 
    // data.setValue(2, 1, 40 + Math.round(60 * Math.random())); 
 
    // chart.draw(data, options); 
 
    //}, 1000); 
 
    } 
 
</script>

पाठ स्थिति के बारे में, मुझे लगता है कि यह असंभव है। आप टेक्स्ट के साथ प्रत्येक चार्ट के नीचे div जोड़ सकते हैं।

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