javascript - 谷歌图表中的水平间隔？

Question

我在工作中使用 React，我们一直在考虑尝试使用内置方法在散点图中的点周围绘制方框。现在，我们可以使用内置的垂直间隔，但有没有办法也添加水平间隔？

我似乎在任何地方都找不到任何相关信息。如果不可能，我们可以通过其他方式实现同​​样的目的吗？

Answer 1

没有内置选项可以在一组点周围绘制一个框。

但是，可以使用图表方法来查找所绘制点的坐标。

首先，使用图表方法 --> getChartLayoutInterface()
它返回布局界面。

布局接口(interface)有一个方法 --> getBoundingBox(id)
其中 id 是您要调查的点。

id 应采用以下形式 --> point#0#0
其中第一个 0 是系列，第二个是行。
例如

var chartLayout = chart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('point#0#0');

bounds 将是一个具有 --> 顶部、左侧、高度和宽度属性的对象

一旦我们有了坐标，我们就可以绘制自己的盒子，
在图表的 'ready' 事件上...

请参阅以下工作片段，
函数 drawBox 接受一个围绕点绘制框的数组。

drawBox([
  {series: 0, row: 1},
  {series: 0, row: 3},
  {series: 0, row: 4}
]);

<小时/>

google.charts.load('current', {
  packages:['controls', 'corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    [8, 12],
    [4, 5.5],
    [11, 14],
    [4, 5],
    [3, 3.5],
    [6.5, 7]
  ]);

  var chartWrapper = new google.visualization.ChartWrapper({
    chartType: 'ScatterChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 36,
        left: 36,
        right: 18,
        bottom: 36
      },
      height: '100%',
      legend: {
        position: 'top'
      },
      pointSize: 8,
      width: '100%',
    }
  });

  google.visualization.events.addListener(chartWrapper, 'ready', function () {
    google.visualization.events.addListener(chartWrapper.getChart(), 'click', function (gglClick) {
      console.log(JSON.stringify(gglClick));
    });
    drawBox([
      {series: 0, row: 1},
      {series: 0, row: 3},
      {series: 0, row: 4}
    ]);
  });

  function drawBox(points) {
    var chart = chartWrapper.getChart();
    var chartLayout = chart.getChartLayoutInterface();
    var container = document.getElementById(chartWrapper.getContainerId())
    var xCoord = {min: null, max: null};
    var yCoord = {min: null, max: null};

    points.forEach(function (point) {
      var bounds = chartLayout.getBoundingBox('point#' + point.series + '#' + point.row);
      xCoord.min = xCoord.min || bounds.left;
      xCoord.min = Math.min(bounds.left, xCoord.min);
      xCoord.max = xCoord.max || bounds.left;
      xCoord.max = Math.max(bounds.left, xCoord.max);
      yCoord.min = yCoord.min || bounds.top;
      yCoord.min = Math.min(bounds.top, yCoord.min);
      yCoord.max = yCoord.max || bounds.top;
      yCoord.max = Math.max(bounds.top, yCoord.max);
    });
    xCoord.min = xCoord.min - chartWrapper.getOption('pointSize');
    xCoord.max = xCoord.max + (chartWrapper.getOption('pointSize') * 2);
    yCoord.min = yCoord.min - chartWrapper.getOption('pointSize');
    yCoord.max = yCoord.max + (chartWrapper.getOption('pointSize') * 2);

    var svg = container.getElementsByTagName('svg')[0];
    var svgNS = svg.namespaceURI;
    var circle = container.getElementsByTagName('circle')[1];
    var box = document.createElementNS(svgNS, 'polygon');
    box.setAttribute('fill', 'transparent');
    box.setAttribute('stroke', '#000000');
    box.setAttribute('stroke-width', '2');
    box.setAttribute('points', xCoord.min + ',' + yCoord.min + ' ' + xCoord.max + ',' + yCoord.min + ' ' + xCoord.max + ',' + yCoord.max + ' ' + xCoord.min + ',' + yCoord.max);
    circle.parentNode.appendChild(box);
  }

  window.addEventListener('resize', function () {
    chartWrapper.draw();
  });
  chartWrapper.draw();
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

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