Как получить текст или значение из гистограммы, круговой диаграммы и т. Д., Которыми управляет элемент canvas? - PullRequest
Новая
       85

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

0 голосов
/ 21 октября 2019

Значения в каждом баре можно увидеть после наведения мыши

Я пытаюсь получить текст с гистограммы на этом рисунке. В нем нет элемента, поэтому я не могу получить текст. Отображается только в дереве dom.

Элемент dom после того, как я проверяю холст

После проверки холста я могу видеть только элемент холста без другого дочернего элемента, так чтоя могу получить текст из графика.

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

Ссылка на веб-сайт, который я пробую, находится ниже Веб-сайт, на котором я пытаюсь автоматизировать элементы холста

Ответы [ 3 ]

0 голосов
/ 21 октября 2019

Данные гистограммы доступны в javascript: 

<script>
  //Basic example
  var ctxB = document.getElementById("myChart").getContext('2d');
  var myBarChart = new Chart(ctxB, {
    type: 'bar',
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
        label: '% of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    optionss: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });

Посмотрите, как извлечь переменные javascript: Чтение переменных JavaScript с помощью Selenium WebDriver

0 голосов
/ 21 октября 2019

Так что всплывающая подсказка является отдельным элементом AFAIK, поэтому вам нужно получить некоторый атрибут элемента всплывающей подсказки. Взгляните на dev tools

Но если вы хотите извлечь значение из фактического холста и если у вас есть этот код, который генерирует эту диаграмму, вам нужно оценить код для этого элемента, напримерИтак: 

let programNames = await this.$barsSection.evaluate("programs"),
    programsData = await this.$barsSection.evaluate("data");

Возможно, вам придется связаться с разработчиками, чтобы узнать, какое имя свойства вы ищете

0 голосов
/ 21 октября 2019

Я думаю, что вы можете использовать логику, которая является изображением и текстом внутри класса контейнера. Таким образом, ваше изображение может появляться перед вашим текстом, где бы вы ни находились, без каких-либо переполнений. Я думаю, это должно работать для canvas. Вы можетепроверьте эту ссылку: https://www.w3schools.com/howto/howto_css_image_text.asp

...