如何在Angular谷歌图表包的量表中显示百分比？

Question

我正在开发一个要显示压力表的应用程序。我正在使用angular-google-chart程序包。

我实现了基本量规类型表。我不想显示像0、100和78这样的整数，而是要在这里显示0％，100％和78％。为此，我使用下面的代码片段。

@ViewChild('googlechart')
  googlechart: GoogleChartComponent;
  public gaugeChart = {
    type: 'Gauge',
    data: [
      ['Water', 35]
    ],
    options: {
      width: 500,
      height: 500,
      greenFrom: 50,
      greenTo: 100,
      redFrom: 0,
      redTo: 20,
      yellowFrom: 20,
      yellowTo: 50,
      minorTicks: 5
    }
  };

Answer 1

对于图表的值（78），我们可以使用对象表示法。其中v:是图表的值，f:是格式化的值。

data: [
  ['Water', {v: 78, f: '78%'}]
],

至于主要刻度（0，100），请使用majorTicks config option。

options: {
  width: 500,
  height: 500,
  greenFrom: 50,
  greenTo: 100,
  redFrom: 0,
  redTo: 20,
  yellowFrom: 20,
  yellowTo: 50,
  minorTicks: 5,
  majorTicks: ['0%', '100%']  // <-- add major ticks
}

请参阅以下工作片段（非角度）...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Water', {v: 78, f: '78%'}]
  ]);

  var options = {
    width: 500,
    height: 500,
    greenFrom: 50,
    greenTo: 100,
    redFrom: 0,
    redTo: 20,
    yellowFrom: 20,
    yellowTo: 50,
    minorTicks: 5,
    majorTicks: ['0%', '100%']
  };

  var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
  chart.draw(data, options);
}

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