如何在Scatter Series谷歌图表上绘制自定义多边形？

Posted 2021-04-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在Scatter Series谷歌图表上绘制自定义多边形？相关的知识，希望对你有一定的参考价值。

我有一个带有一组点的Scatter系列，如此处所示。 https://developers.google.com/chart/interactive/docs/gallery/scatterchart

这些点被分组，每个组以不同的颜色显示。我想在每个组（凸包）周围绘制一个多边形。看起来没有一种直接的方法来添加多个多边形，每个多边形有n个边界点到图表。

答案

如果你有一个算法来找到边界点，你可以使用ComboChart来绘制散射和线系列...... 使用选项seriesType设置默认类型使用选项series来自定义特定系列的类型

在以下工作片段中，使用的算法来自 - > Convex Hull | Set 1 (Jarvis’s Algorithm or Wrapping) （从Java版本转换）

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var groupA = [
    [0,3],[2,3],[1,1],[2,1],[3,0],[0,0],[3,3],[2,2]
  ];

  var groupB = [
    [11,11],[12,12],[12,10],[12,14],[13,13],[14,12],[15,12],[16,12]
  ];

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');
  data.addRows(groupA);
  data.addRows(groupB);

  addGroup('A', data, groupA)
  addGroup('B', data, groupB)

  var options = {
    chartArea: {
      bottom: 48,
      height: '100%',
      left: 36,
      right: 24,
      top: 36,
      width: '100%'
    },
    height: '100%',
    seriesType: 'line',
    series: {
      0: {
        type: 'scatter'
      }
    },
    width: '100%'
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

  drawChart();
  window.addEventListener('resize', drawChart, false);

  function drawChart() {
    chart.draw(data, options);
  }

  function addGroup(group, dataTable, points) {
    var polygon = convexHull(points);
    var colIndex = dataTable.addColumn('number', group);
    for (var i = 0; i < polygon.length; i++) {
      var rowIndex = dataTable.addRow();
      dataTable.setValue(rowIndex, 0, polygon[i][0]);
      dataTable.setValue(rowIndex, colIndex, polygon[i][1]);
    }
  }

  function orientation(p, q, r) {
    var val = (q[1] - p[1]) * (r[0] - q[0]) -
              (q[0] - p[0]) * (r[1] - q[1]);

    if (val == 0) {
      return 0;  // collinear
    } else if (val > 0) {
      return 1;  // clock wise
    } else {
      return 2;  // counterclock wise
    }
  }

  function convexHull(points) {
    // must be at least 3 rows
    if (points.length < 3) {
      return;
    }

    // init
    var l = 0;
    var p = l;
    var q;
    var hull = [];

    // find leftmost point
    for (var i = 1; i < points.length; i++) {
      if (points[i][0] < points[l][0]) {
        l = i;
      }
    }

    // move counterclockwise until start is reached
    do {
      // add current point to result
      hull.push(points[p]);

      // check orientation (p, x, q) of each point
      q = (p + 1) % points.length;
      for (var i = 0; i < points.length; i++) {
        if (orientation(points[p], points[i], points[q]) === 2) {
          q = i;
        }
      }

      // set p as q for next iteration
      p = q;
    } while (p !== l);

    // add back first hull point to complete line
    hull.push(hull[0]);

    // set return value
    return hull;
  }
});

html, body, #chart_div {
  height: 100%;
}

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

以上是关于如何在Scatter Series谷歌图表上绘制自定义多边形？的主要内容，如果未能解决你的问题，请参考以下文章

试图在依赖于其他数据点的谷歌表格上制作图表