Я пытаюсь запустить асинхронную функцию, которая создает диаграмму 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, но я не верю, что какие-либо данные в диаграмме неверны. Я действительно в растерянности.