在谷歌图的水平时段？

Question

我使用的是阵营在工作中，我们一直在想试图使用内置的方法散点图周围绘制点框。现在，我们可以使用内置的垂直间隔，但有没有办法还补充说，那张水平的间隔？

我似乎无法找到任何地方任何事情。如果它是不可能的，我们可以实现一些其他的方式一样吗？

Answer 1

有没有内置的选项周围画一组点的一箱。

但是，也有可找到绘制的点的坐标图的方法。

第一，可使用图表方法 - > getChartLayoutInterface() 它返回布局接口。

布局接口具有用于方法 - > getBoundingBox(id) 其中id是要调查点。

所述id应在形式 - > point#0#0 其中第一0是系列，第二个是该行。 例如

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

bounds将是与属性的对象 - >顶部，左侧，高度，宽度及

一旦我们有了坐标，我们可以得出你自己的盒子， 在排行榜上qazxsw POI事件...

看到下面的工作片段， 功能'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%;
}