如何在最小值、最大值上使用十进制百分比格式化 Google Chart Gauge？

问题描述

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

0.00% 到 100.00%

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

if(marker!=null){
 marker.remove(); //will clear the prevIoUs one,it might be null at first.
}  
marker=addMarker(yourOptions);//will add the latest one

这仅适用于中间值。

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

解决方法

使用 majorTicks 刻度选项添加标签...

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

请参阅以下工作片段...

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%',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>