nasıl guage dışında google göstergesi alt etiket basmak için?

Question

Ben (tıpkı ilgili göstergeler aşağıda) dışında Google ölçer alt etiket basmak için çalışıyorum. Ayrıca, iki ölçü için iki farklı sonek sağlamak istiyorum. Hem ayrı veri (veri1 ve veri2) için ayrı biçemleyicileri (formatter1, formatter2) vererek denedim, ama o bile göstergeleri (hata yok) çizim değil. Bu durumda, draw_data_guage dördüncü bağımsız değişkeni olacaktır.

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>

Ben mastar alt etiket dışında görüntülenen ve her iki göstergeler için ayrı ekleri vermek mümkün olmak istiyorum. Bu jsfiddle link'u düşünün. Yüzdeleri (alt etiket) hemen altındaki göstergelerin dışında görüntülemek istiyorum. Jsfiddle bağlantım here. Şimdiden teşekkürler. grafikleri ayırmak için

Answer 1

istikametimiz doğru. İşte bunun nasıl olduğunu: Metin konumu hakkında

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>

, bunun imkansız olduğunu düşünüyorum. Metnin her grafiğinin altında div ekleyebilir.