Chart.js 折线图未显示在 Google Chrome 画布中（仅在 Microsoft Edge 中）
[英]Chart.js line chart not showing in Google Chrome canvas(only in Microsoft Edge)
问题描述
Using Chart.js library.
使用 Chart.js 库。 Programm works only in the Microsoft Edge browser. Programm 仅适用于 Microsoft Edge 浏览器。 The other browsers just give a black canvas其他浏览器只提供黑色画布
Chart.js version 2.9.3 " https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js " Chart.js 版本 2.9.3 " https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js "
ERRORS: data1.js:30 Fetch API cannot load file:///C:/Users/avtor/Documents/Job/stock_bot/myChart/myChart1/intraday_5min_MSFT.csv.错误： data1.js:30 Fetch API 无法加载 file:///C:/Users/avtor/Documents/Job/stock_bot/myChart/myChart1/intraday_5min_MSFT.csv。 URL scheme must be "http" or "https" for CORS request.对于 CORS 请求，URL 方案必须是“http”或“https”。
getData @ data1.js:30 data1.js:30 Uncaught (in promise) TypeError: Failed to fetch at getData (data1.js:30) at getChart1 (data1.js:5) at data1.js:3 getData @ data1.js:30 data1.js:30 Uncaught (in promise) TypeError: Failed at getData (data1.js:30) at getChart1 (data1.js:5) at data1.js:3
<!DOCTYPE HTML>
<html>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js" ></script>
<head>
<title>Money Thingy</title>
</head>
<body>
<canvas id="myChart" style='height: 100;width: 800;background:#282c34;z-index: -50;'></canvas>
<script src="data1.js"> </script>
</body>
</html>
The js part ( reading data from CSV file ) js 部分（从 CSV 文件读取数据）
const xLabels=[];
const yTemps =[];
getChart1();
async function getChart1(){
await getData();
var ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xLabels,
datasets: [{
label: 'MSFT',
data: yTemps,
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
borderWidth: 1
}]
}
});
}
async function getData() {
const response = await fetch ('intraday_5min_MSFT.csv');
const data = await response.text();
const table = data.split('\n').slice (1);
table.forEach(row => {
const columns= row.split(',');
const time =columns[0];
xLabels.push(time);
const volume = columns[4];
yTemps.push (volume);
console.log(time,volume);
});
1 个解决方案
解决方案1
0 2020-04-02 17:23:22
In order to work fetch properly, you need to serve your file from an HTTP server.为了正常工作，您需要从 HTTP 服务器提供您的文件。 In the error, I can see the file is fetching directly from the file manager which won't work with fetch API.在错误中，我可以看到文件直接从文件管理器中获取，这不适用于 fetch API。
So you can solve this by two methods.所以你可以通过两种方法解决这个问题。 Install apache server and serve the file from the localhost.安装apache server并从localhost.提供文件localhost. Install apache and move the files to \\var\\www\\html in Linux and /xampp/htdocs/ in windows.安装 apache 并将文件移动到 Linux 中的\\var\\www\\html和 Windows 中的/xampp/htdocs/ 。
Or you can install a live server extension in your IDE so that the file will be loaded from a server.或者，您可以在 IDE 中安装live server扩展，以便从服务器加载文件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.