时间戳

首页 > 解决方案 > 谷歌散点图上的数据点与静态多边形

javascript - 谷歌散点图上的数据点与静态多边形

问题描述

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

我正在尝试创建这样的东西：在此处输入图像描述

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

      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>

小提琴

标签： javascriptchartsgoogle-visualization

解决方案

您可以将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'
    }
  }
};

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

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>

推荐阅读