Горизонтальные интервалы в Google Chart?

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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
149
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.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 катастрофически не хватает :')

OmniOwl 11.02.2019 16:16

Другие вопросы по теме