时间戳

首页 > 解决方案 > 图表 JS 错误：未捕获的类型错误：无法读取未定义的属性“顶部”

javascript - 图表 JS 错误：未捕获的类型错误：无法读取未定义的属性“顶部”

问题描述

这是我第一次使用 JS，需要使用 jQuery 和 Chart Js 来绘制时间序列。但我不断收到以下错误：

Uncaught TypeError: Cannot read property 'top' of undefined
    at callFllSamplesApi (plot.js:105)

代码块：

//Script included before body tag  (Chart.js 2.4, jQuery 3.4, local file plot.js with callFllSamplesApi() )

<body>
        <canvas id="line-chart" width="450" height="500"></canvas>
        <button id="btn1" onclick="callFllSamplesApi()">Generate FLL Graph</button>
 </body>

函数 callFLLSamplesApi 如下所示，其中包含引发错误的行。

function callFllSamplesApi() {

    var request = new XMLHttpRequest()
    request.open('GET', 'http://193.142.33.4/api/samples', true)
    request.onload = function(){
        ... Parsing code         
    }
    request.send()
    var ctx = document.getElementById("line-chart");
    var myChart = new Chart(ctx, {  <- Line 105 which throws an error
        ... More code for plotting
            }
        }
    });
}

标签： javascriptjquerychart.js

解决方案

您缺少getContext()折线图元素

var ctx = document.getElementById("line-chart").getContext('2d');

https://www.chartjs.org/docs/latest/

推荐阅读