GoogleChartのメーター表示で%表示する
GoogleChartのメーター表示、gaugeで%表示をします。
%表示をするにはGoogle Visualization APIのNumberFormatを使います。
var formatter = new google.visualization.NumberFormat( {suffix: '%',pattern:'#'} ); formatter.format(data,1);
gaugeで使った場合は以下になります。
<html> <head> <meta charset="UTF-8"> <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 data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Memory', 80], ]); var options = { width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5, animation: { duration: 1000, easing: 'inAndOut' }, redColor: '#AE0239',yellowColor: '#EDB872' }; var chart = new google.visualization.Gauge(document.getElementById('chart_div')); chart.draw(data, options); //setIntervalの3000はスピード setInterval(function() { data.setValue(0, 1, 40 + Math.round(60 * Math.random())); var formatter = new google.visualization.NumberFormat( {suffix: '%',pattern:'#'} ); formatter.format(data,1); chart.draw(data, options); }, 3000); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 120px;"></div> </body> </html>