javascript - Chart.js 仅在按下 f12 后显示

Question

我试图在网页打开时显示股票图表，但除非我按 f12，否则它不会显示

我已经尝试过将代码包含在函数中并在按下按钮时显示图表，但它似乎也不起作用

<script type="text/javascript">
    var highlist = [];
    var lowlist = [];
    var datelist = [];
    $.getJSON("https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=MSFT&apikey=G9UIQ9K1TRVBHHME", function(json) {
        var times = json["Time Series (Daily)"];
        for(var time in times)
            {
                var stock_info = times[time];
                var highItem = stock_info["2. high"];
                var lowItem = stock_info["3. low"];
                highlist.push(highItem);
                lowlist.push(lowItem);
                datelist.push(time);                                  
            }
    });
    var ctx = document.getElementById("lineChart").getContext('2d');
    var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: datelist,
        datasets: [{
            label: "My First dataset",
            label: "High",
            backgroundColor: [
            'rgba(204, 204, 255, .2)',
            ],
            borderColor: [
            'rgba(51, 51, 255, .7)',
            ],
            borderWidth: 2,
            data: highlist
            },
            {
            label: "Low",
            backgroundColor: [
            'rgba(0, 137, 132, .2)',
            ],
            borderColor: [
            'rgba(0, 10, 130, .7)',
            ],
            data: lowlist
            }]
        },
    });
</script>

期望图表显示，但除非按 f12，否则什么都不显示

Answer 1

getJson 是一个异步函数，所以 JS 会发送一个请求，然后在得到响应之前绘制你的图表。

将所有图表内容放入一个函数中，然后在 getJson 回调中的 for 循环之后调用该函数。