Как распечатать нижнюю метку гугл манометра за пределами манометра?

Question

Я пытаюсь напечатать нижнюю метку датчиков Google снаружи (чуть ниже соответствующих датчиков). Кроме того, я хочу предоставить два разных суффикса для двух датчиков. Я попытался дать отдельные форматеры (formatter1, formatter2) для обоих и отдельных данных (data1 и data2), но это даже не рисование датчиков (без ошибок). В этом случае draw_data_guage будет иметь четвертый аргумент.

var e = document.getElementById('draw_chart');
e.onclick = draw_data_gauge(80, 68, '%');

function draw_data_gauge(cpu_data, memory_data, suffix) {
  console.log("in guage")
  google.charts.load('current', {
    'packages': ['gauge']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data1 = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['CPU', cpu_data],
      ['Memory', memory_data],
    ]);
    var options = {
      width: 500,
      height: 150,
      redFrom: 90,
      redTo: 100,
      yellowFrom: 75,
      yellowTo: 90,
      minorTicks: 5,
    };
    var formatter1 = new google.visualization.NumberFormat({
      suffix: suffix,
    });
    formatter1.format(data1, 1);
    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

    chart.draw(data1, options);
  }
}

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

<input name="Button" type="button" value="Draw" id="draw_chart" />

<div id="chart_div"></div>

Я хочу, чтобы нижняя метка датчика отображалась снаружи и была в состоянии дать отдельные суффиксы для обоих датчиков. Рассмотрим эту ссылку jsfiddle. Я хочу отобразить проценты (нижняя метка) за пределами датчиков чуть ниже их. Моя ссылка на jsfiddle здесь. Заранее спасибо.

Answer 1

Ваше направление для разделения графиков правильно. Вот как это сделать:

div {
  display: inline-block;
}

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript">
  google.load('visualization', '1', {
    packages: ['gauge']
  });
  google.setOnLoadCallback(drawChart);

  function drawChart() {

    var options = {
      width: 400,
      height: 120,
      redFrom: 90,
      redTo: 100,
      yellowFrom: 75,
      yellowTo: 90,
      minorTicks: 5
    };

    var source = [{
        data: ['Memory', 80],
        suffix: '%'
      },
      {
        data: ['CPU', 55],
        suffix: '?'
      },
      {
        data: ['Network', 68],
        suffix: '$'
      },
    ];

    source.map((item, index) => {
      var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        item.data
      ]);

      var formatter = new google.visualization.NumberFormat({
        suffix: item.suffix,
        fractionDigits: 0
      });
      formatter.format(data, 1);

      document.body.innerHTML += '<div id="chart_div_' + index + '"></div>';
      var chart = new google.visualization.Gauge(document.getElementById('chart_div_' + index));
      chart.draw(data, options);
    });


    // dynamic update, randomly assign new values and redraw
    //setInterval(function() {
    //  data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
    //  formatter.format(data, 1);
    //  chart.draw(data, options);
    //}, 1000);
    //
    //setInterval(function() {
    //  data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
    //  chart.draw(data, options);
    //}, 1000);
    //
    //setInterval(function() {
    //  data.setValue(2, 1, 40 + Math.round(60 * Math.random()));
    //  chart.draw(data, options);
    //}, 1000);
  }
</script>

Насчет позиции текста, я думаю, что это невозможно. Вы можете добавить div ниже каждого графика с текстом.