javascript - 如何在 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
}

请参阅以下工作片段(非 Angular )...

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>