javascript - 如何在表外打印Google Gauge的底部标签？

我正在尝试在外部打印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 link。我想在仪表下方显示百分比(底部标签)。我的jsfiddle链接是here。提前致谢。

最佳答案

您分开图表的方向是正确的。这是执行此操作的方法:

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。

关于javascript - 如何在表外打印Google Gauge的底部标签？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47773361/