Отображение JSON на графике. js - PullRequest
Новая
       5

Отображение JSON на графике. js

0 голосов
/ 05 марта 2020

Я извлекаю и анализирую JSON данных из локального файла и использую Диаграмму. js для отображения данных. Данные, которые я хочу отобразить, - это количество раз, которое используется данное слово, и слово в качестве метки диаграммы.

Проблемы:

Мне удалось получить пару слово и вхождение в функции wordCount. Если я выйду из системы counts, я смогу увидеть матч. С чем я сталкиваюсь, так это с тем, как правильно отображать данные с тем, что у меня есть. Я вижу некоторые из них, но это не правильно.

Код: 

var ctx = document.getElementById('myChart').getContext('2d');
const tweets = []
const counts = {}
const keyz = []

// Fetch JSON file locally and return the data
fetch('../test_feed.json')
  .then(res => res.json())
  .then(data => {
    handleTweetText(data)
    compare()
    wordCount()
    createChart()
  })
.catch(err => console.error(err));

function handleTweetText(data) {
  for (var i = 0; i < data.content.length; i++) {
    const tweetHtml = data.content[i].content.bodyHtml;

    // If tweet exists, return it
    if(tweetHtml && tweetHtml != '') {
      // Regex to grab entire anchor tag
      const regEx = /<a(\s[^>]*)?>.*?<\/a>/ig
      // Replace anchor with empty string and remove empty space
      const splitTweetText = tweetHtml.replace(regEx, '').trim()
      tweets.push(splitTweetText)
    }
  }
}

function wordCount() {
  const allWords = tweets.join('\n')
  const tokens = allWords.split(/\W+/)

  for (let i = 0; i < tokens.length; i++) {
    var word = tokens[i].toLowerCase()

    if (counts[word] === undefined) {
      counts[word] = 1 
      keyz.push(word)
    } else {
      counts[word] = counts[word] + 1
    }
  }  

}

// sort word occurrence 
keyz.sort(compare)

function compare(a ,b,) {
  const countA = counts[a]
  const countB = counts[b]
  return countB - countA
}

// Chart
function createChart() {
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
      labels: keyz,
      datasets: [{
          label: 'Word Count',
          data: keyz,
          backgroundColor: [
              'rgba(255, 99, 132, 0.2)'
          ],
          borderWidth: 1
      }]
  }
})}

Поля labels и поле data в пределах datasets - это место, где мне нужно разместить свои парные данные.

Я работаю над этим некоторое время, но не повезло.

1 Ответ

0 голосов
/ 05 марта 2020

для одного, fetch является асинхронным, поэтому вы должны ждать, пока он не завершится sh.
, поэтому у вас есть then методы.

однако вы пытаетесь отсортировать keyz до того, как keyz получит какие-либо данные.

переместить функцию сортировки в метод then,
после wordCount, где заполнен keyz.
и вызов compare сам по себе ничего не делает ... 

// Fetch JSON file locally and return the data
fetch('../test_feed.json')
  .then(res => res.json())
  .then(data => {
    handleTweetText(data)
    wordCount()
    keyz.sort(compare)
    createChart()
  })
.catch(err => console.error(err));

но обычно вы не используете одни и те же данные для labels и data на графике.
возможно ли, что вы намеревались использовать counts для data в диаграмма?

...