在Chart.js中显示JSON

Question

我正在从本地文件中获取并解析JSON数据，并且正在使用Chart.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字段是我需要放置配对数据的位置。

我已经为此工作了一段时间，没有运气。

Answer 1

例如，fetch是异步的，因此您必须等待它完成。这就是为什么您有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？