Как отобразить процент в диаграмме калибровки Angular пакета Google-диаграммы? - PullRequest
Новая
       11

Как отобразить процент в диаграмме калибровки Angular пакета Google-диаграммы?

1 голос
/ 24 марта 2020

Я разрабатываю приложение, в котором я собираюсь показать диаграмму калибровки. Я использую пакет angular -google-chart. enter image description here

Я использую базовую диаграмму типа датчика c. Вместо того, чтобы показывать плоские числа, такие как 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
    }
  };

1 Ответ

0 голосов
/ 24 марта 2020

для значения диаграммы (78) мы можем использовать обозначение объекта.
, где v: - это значение диаграммы, а f: - это отформатированное значение. 

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

Что касается основных тиков (0, 100), используйте параметр конфигурации majorTicks . 

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>
...