Question

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

我似乎在任何地方都找不到任何东西。如果不可能的话，我们可以通过其他方式实现同样的目标吗？

Answer 1

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

但是，有一些图表方法可以找到绘制的点的坐标。

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

布局界面具有用于-> 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>

Google Chart中的水平间隔？

1 个答案: