如何在Angular google图表包的仪表图中显示百分比？

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>

​