谷歌散点图上的数据点与静态多边形答案

【问题标题】：Data points on google scatter chart with static polygon谷歌散点图上的数据点与静态多边形
【发布时间】：2021-07-12 15:58:06
【问题描述】：

我正在创建一个仪表板，该仪表板需要在图表上显示传感器的当前温度/湿度，并根据定义的静态多边形显示它。多边形代表可接受的温度/湿度区域。我不需要显示以前的值，只需显示当前的温度/湿度点。

我正在尝试创建这样的东西：

什么谷歌图表可以容纳这样的东西？有没有更好的图书馆可以处理这个问题？我可以用散点图显示数据，但我不确定如何处理多边形：

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Humidity', 'Temp'],
          [ 51,      68],
        ]);

        var options = {
          title: 'Temp Humidity ',
          hAxis: {title: 'Relative Humidity', minValue: 45, maxValue: 65},
          vAxis: {title: 'Temperature (F)', minValue: 64, maxValue: 80},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>

Fiddle

【问题讨论】：

标签： javascript charts google-visualization

【解决方案1】：

您可以使用ComboChart，并为多边形使用线系列。

为多边形的 y 轴值添加第三列。
然后为多边形的每个角添加行，
用一个额外的行将多边形连接回第一个角。

使用null 作为“其他”系列的列值。

var data = google.visualization.arrayToDataTable([
  ['Humidity', 'Temp', 'poly'],
  // scatter point
  [51, 68, null],

  // polygon
  [54, null, 70],
  [58, null, 70],
  [58, null, 72],
  [54, null, 72],
  [54, null, 70],
]);

在选项中，设置系列选项如下...

var options = {
  title: 'Temp Humidity ',
  hAxis: {title: 'Relative Humidity', minValue: 45, maxValue: 65},
  vAxis: {title: 'Temperature (F)', minValue: 64, maxValue: 80},
  legend: 'none',
  seriesType: 'scatter',
  series: {
    1: {
      color: '#000000',
      type: 'line'
    }
  }
};

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Humidity', 'Temp', 'poly'],
    // scatter point
    [51, 68, null],

    // polygon
    [54, null, 70],
    [58, null, 70],
    [58, null, 72],
    [54, null, 72],
    [54, null, 70],
  ]);

  var options = {
    title: 'Temp Humidity ',
    hAxis: {title: 'Relative Humidity', minValue: 45, maxValue: 65},
    vAxis: {title: 'Temperature (F)', minValue: 64, maxValue: 80},
    legend: 'none',
    seriesType: 'scatter',
    series: {
      1: {
        color: '#000000',
        type: 'line'
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

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

【讨论】：