Google 图表仅显示第一个找到的 high/low 值的注释文本

Question

我用 rpi 零构建了一个气象站，然后将测量值保存在 MariaDB 数据库中，然后在本地托管服务器上的 Google 图表中显示数据。我已经设置了一些代码来显示每个度量的今天最高值和最低值的注释文本。我的问题是，如果重复相同的值，它会再次将注释文本放在那里，即这个晚上一点风都没有，所以它整晚都测量了 0m/s，你可以在下图中看到结果。

注释文字使用的代码如下：

    windview.setColumns([0,1,
    {
    role: "annotation",
    type: "string",
    calc: function (dt, row) { 
        var windrange = dt.getColumnRange(1);
        var windcurVal = dt.getFormattedValue(row, 1);
        if(windcurVal == windrange.min || windcurVal == windrange.max)
            return ((windcurVal)+ 'm/s'); 
        return null; 
        }
    }
]);

我想实现的是第一次只显示0m/s，试过几种方法都行不通

Answer 1

找到匹配后，
我们可以使用 getFilteredRows 来确保它是具有该值的第一行。

windview.setColumns([0, 1, {
  role: "annotation",
  type: "string",
  calc: function (dt, row) {
    var windrange = dt.getColumnRange(1);
    var windcurVal = dt.getValue(row, 1);
    var windcurFmt = dt.getFormattedValue(row, 1);
    if ((windcurVal === windrange.min) || (windcurVal === windrange.max)) {
      var rows = dt.getFilteredRows([{
        column: 1,
        value: windcurVal
      }]);
      if ((rows.length > 0) && (rows[0] === row)) {
        return ((windcurFmt) + 'm/s');
      }
    }
    return null;
  }
}]);

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0'],
    [0, 0],
    [1, 0],
    [2, 0],
    [3, 1],
    [4, 1],
    [5, 2],
    [6, 2],
    [7, 3],
    [8, 3],
    [9, 3]
  ]);

  var windview = new google.visualization.DataView(data);
  windview.setColumns([0, 1, {
    role: "annotation",
    type: "string",
    calc: function (dt, row) {
      var windrange = dt.getColumnRange(1);
      var windcurVal = dt.getValue(row, 1);
      var windcurFmt = dt.getFormattedValue(row, 1);
      if ((windcurVal === windrange.min) || (windcurVal === windrange.max)) {
        var rows = dt.getFilteredRows([{
          column: 1,
          value: windcurVal
        }]);
        if ((rows.length > 0) && (rows[0] === row)) {
          return ((windcurFmt) + 'm/s');
        }
      }
      return null;
    }
  }]);

  var options = {
    legend: 'none',
    vAxis: {
      viewWindow: {
        min: 0,
        max: 5
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(windview, options);
});

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

Google 图表仅显示第一个找到的 high/low 值的注释文本

Google Charts only annotation text on first found high/low value

charts

annotations

google-visualization