Асинхронная функция JavaScript не работает в HTML-сценарии - PullRequest
0 голосов
/ 28 июня 2018

Я пытаюсь запустить асинхронную функцию, которая создает диаграмму chart.js в html-скрипте, но ничего не появляется. Это работает, когда я изменяю код, чтобы быть синхронным с фиктивными данными.

HTML-холст с местоположением диаграммы:

<div class="tile is-4 is-parent">
  <div class="tile is-child box">
    <canvas id="myChart"></canvas>
  </div>
</div>

HTML-скрипт:

<script type="text/javascript" src="profile.js"></script>
<script type="text/javascript">
  makeBTCWeeklyLineChart()
</script>

profile.js:

const axios = require('axios')
const config = require(path.resolve(__dirname, "./config.js"))
const moment = require('moment')

const json = require("json")

async function makeBTCWeeklyLineChart() {
  let chrt = document.getElementById("myChart").getContext("2d")
  let obj = await getBTCweekly()
  let data = {
    labels: obj.labels,
    datasets: [
      {
        label: "Weekly Market Cap",
        backgroundColor: "#0B244399", 
        borderColor: "#0B244399",
        hoverBackgroundColor: "#0B244399",
        hoverBorderColor: "#0B244399",
        data: obj.data
      }
    ]
  }
  let myFirstChart = new Chart(chrt, {
    type: "line",
    data: data,
    options: {
      responsive: true,
      title: {
        display: true,
        text: 'BTC Weekly Market Cap'
      },
      scales: {
        xAxes: [{
          type:       "time",
          time:       {
              format: 'YYYY-MM-DD',
          }
        }]
      }
    }
  })
}

async function getBTCweekly(){
  let response = await axios.get('https://www.alphavantage.co/query?function=DIGITAL_CURRENCY_WEEKLY&symbol=BTC&market=USD&apikey=' + config.apikey)
  let obj = { labels: [], data: [] }
  const data = response.data['Time Series (Digital Currency Weekly)']
  for(let key in data){
    obj.labels.push(key)
    if (data.hasOwnProperty(key)){
      obj.data.push(parseFloat(data[key]['6. market cap (USD)']))
    }
  }
  return obj
}

Я перепробовал все, что мог придумать. Мне кажется, что страница загружается до того, как сценарий успевает завершиться, но я читал в другом месте, что сценарий должен быть запущен до завершения, пока html не закончит анализ. Существует небольшая вероятность того, что это проблема форматирования json, но я не верю, что какие-либо данные в диаграмме неверны. Я действительно в растерянности.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...