5

我正在尝试在外面打印谷歌仪表的底部标签（就在各自的仪表下方）。另外，我想为这两个仪表提供两个不同的后缀。我尝试为两者和单独的数据（data1和data2）提供单独的格式化程序（formatter1，formatter2），但它甚至没有绘制仪表（没有错误）。在这种情况下，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 链接在这里。提前致谢。

4

1 回答 1

2

您分离图表的方向是正确的。以下是如何做到这一点：

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在每个图表下方添加文本。

于 2017-12-12T14:29:44.970 回答