Googleゲージの下のラベルをゲージの外側に印刷するにはどうすればよいですか？

Question

Googleゲージのボトムラベルを（それぞれのゲージのすぐ下に）印刷しようとしています。また、2つのゲージに2つの異なる接尾辞を付けたいと思います。私は両者に別々のフォーマッタ（formatter1、formatter2）を与えようとしましたが、データ（data1とdata2）は別々ですが、ゲージ（エラーなし）を描画していません。この場合、draw_data_guageには4番目の引数があります。

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>

私は、ゲージの下のラベルが外側に表示され、ゲージの両方のために別の接尾辞を与えることができるようになりたいです。これを考慮してくださいlink。私はそれらの真下のゲージの外側にパーセンテージ（下のラベル）を表示したいと思います。私のjsfiddleリンクはhereです。前もって感謝します。

Answer 1

グラフを分割する方向が正しいです。ここでは、これを行う方法です：テキストの位置について

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をテキストとともに追加することができます。