如何在最小值、最大值上使用小数百分比格式化 Google Chart Gauge？答案

【问题标题】：How can I format Google Chart Gauge with decimal % on min, max?如何在最小值、最大值上使用小数百分比格式化 Google Chart Gauge？
【发布时间】：2021-01-05 18:47:19
【问题描述】：

我知道有一个像 min, max（数字类型）这样的选项来配置值，但我想知道是否可以将它们设置为...

0.00% 到 100.00%

我知道可以在 GoogleSheets 图表上执行此操作，但我不确定如何在 javascript 上执行此操作或是否可行。

var formatnumbers = new google.visualization.NumberFormat({
  suffix: '%',
  fractionDigits: 2
});
formatnumbers.format(data, 1);

这仅适用于中间值。

google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

 var data = google.visualization.arrayToDataTable([
   ['Label', 'Value'],
   ['ALCANCE', 80],
   ['OBJETIVO', 55],
   ['MEDICOS TOP', 68]
 ]);

 var options = {
   width: 600, height: 220,//400,120
   redFrom: 0, redTo: 75,
   yellowFrom:75, yellowTo: 85,
   greenFrom:85 , greenTo:100,
   minorTicks: 5,
   min:0,
   max:100
  };

 var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
    
    //----------------new--------------//
    
 var formatnumbers = new google.visualization.NumberFormat({
   suffix: '%',
   fractionDigits: 2
  });
 formatnumbers.format(data, 1);
    
    //--------------------------------//

 chart.draw(data, options);

 setInterval(function() {
    data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
    chart.draw(data, options);
  }, 13000);
  setInterval(function() {
     data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
     chart.draw(data, options);
  }, 5000);
  setInterval(function() {
     data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
     chart.draw(data, options);
    }, 26000);
  }

【问题讨论】：

标签： javascript charts google-visualization gauge

【解决方案1】：

使用majorTicks ticks 选项添加标签...

    majorTicks: ['0.00%', '100.00%'],

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['gauge']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['ALCANCE', 80],
    ['OBJETIVO', 55],
    ['MEDICOS TOP', 68]
  ]);

  var options = {
    width: 600, height: 220,//400,120
    redFrom: 0, redTo: 75,
    yellowFrom:75, yellowTo: 85,
    greenFrom:85 , greenTo:100,
    minorTicks: 5,
    majorTicks: ['0.00%', '100.00%'],
    min: 0,
    max: 100
  };

  var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

  var formatnumbers = new google.visualization.NumberFormat({
    suffix: '%',
    fractionDigits: 2
  });
  formatnumbers.format(data, 1);

  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

【讨论】：