Я использую React на работе, и мы думали о том, чтобы попытаться нарисовать прямоугольники вокруг точек на диаграмме рассеяния, используя встроенные методы. Теперь мы можем использовать встроенные вертикальные интервалы, но есть ли способ добавить интервал, который идет по горизонтали?
Кажется, я нигде не могу найти ничего об этом. Если это невозможно, можем ли мы добиться того же каким-то другим способом?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


нет встроенных опций для рисования рамки вокруг набора точек.
однако существуют методы диаграммы, позволяющие найти координаты нарисованных точек.
во-первых, используйте метод диаграммы --> 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.info(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>
Ух ты. WhiteHat приходит на помощь дважды! Спасибо, приятель, это действительно полезно. Моих знаний в Google Chart катастрофически не хватает :')