Question

我试图访问json文件（timeseries.json），以便将数据加载到我的应用程序中。我正在拨打AJAX电话。我怀疑问题出在我的代码的这一行：

req.open("GET",'JSON/timeseries.json',true);

问题是我不知道如何正确放置路径。我去浏览器复制了文件的路径，然后放入了文件，但是我不希望人们看到我计算机的中间文件夹（因为我在GitHub中有一个存储库）

我从Internet浏览器（Chrome）中收到以下错误消息：

index.js：16在以下位置访问XMLHttpRequest 'file：/// myfilepath' 来自原点“ null”的信息已被CORS政策阻止：交叉原点仅协议方案支持请求：http，data，chrome， chrome-extension，https。

您可以看到我的项目at this code笔的早期版本，这样您就可以大致了解其外观。

javascript代码：

var currentWeek;
var weekValue = currentWeek; //At first time weekValue points to the current week
var dailyTimePerProjectPerWeek;

function getData(){
req=new XMLHttpRequest();
req.onreadystatechange=function(){ 
  if (req.readyState === 4 && req.status === 200){ 
  dailyTimePerProjectPerWeek = JSON.parse(req.responseText); 
  } else if (req.readyState === 4 && req.status === 404){
    console.log(req.responseText);
  }

};
req.open("GET",'JSON/timeseries.json',true);
req.send();
currentWeek = dailyTimePerProjectPerWeek.length - 1;
}


function drawData(){

  chart.data = dailyTimePerProjectPerWeek[weekValue];
  chart.update();
}


function incrementWeek(){
 if(weekValue === dailyTimePerProjectPerWeek.length - 1){
   console.log("This is the current week");
 } else {
  weekValue += 1;
  drawData();
 }
}

function decrementWeek(){
 if(weekValue === 0){
   console.log("This is the oldest week of the time series");
 } else {
  weekValue -= 1;
  drawData();
 }
}



//Main Program
/*
var chart = new Chart(ctx, {
   type: 'bar',
   data: dailyTimePerProjectPerWeek[weekValue],
   options: {
      responsive: false,
      legend: {
         position: 'right' // place legend on the right side of chart
      },
      scales: {
         xAxes: [{
            stacked: true // this should be set to make the bars stacked
         }],
         yAxes: [{
            stacked: true // this also..
         }]
      }
   }
});
*/
getData();
console.log(dailyTimePerProjectPerWeek);

html代码：

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Charts4DailyProgress</title>



      <link rel="stylesheet" href="css/style.css">


</head>

<body>


<body>
<h1>Weekly Time per Project</h1>
<div id="canvas-container">
<canvas id="ctx" width="1000"></canvas>
<button type="button" onclick="decrementWeek()">Previous Week</button>
<button type="button" onclick="incrementWeek()">Next Week</button>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
  <script  src="js/index.js"></script>

</body>


</html>

json：

[{

   "labels": ["M", "TU", "W", "TH", "F", "SA", "SU"],
   "datasets": [{
      "label": "Master Project. Second Part",
      "data": [300, 480, 360, 180, 240, 300, 480],
      "backgroundColor": "#D4AF37"
   }, {
      "label": "Guild Ideas - Learning Angular",
      "data": [60, 0, 240, 180, 120, 0, 60],
      "backgroundColor": "#C0C0C0"
   }, {
      "label": "Charts For Daily Progress",
      "data": [60, 180, 120, 180, 120, 120, 0],
      "backgroundColor": "#133a7c"
   }, {
      "label": "Project Manager",
      "data": [120, 180, 120, 120, 0],
      "backgroundColor": "#109618"
   }, {
      "label": "TOOYS",
      "data": [0, 180, 120, 0, 120, 0, 0],
      "backgroundColor": "#990099"
   }, {
      "label": "Web Pc Explorer",
      "data": [0, 0, 120, 180, 0, 120, 0],
      "backgroundColor": "#54161F"
   }, {
      "label": "Mind Maps Program",
      "data": [0, 0, 180, 180, 0, 0, 0],
      "backgroundColor": "#708238"
   }, {
      "label": "Chain System",
      "data": [0, 0, 180, 0, 0, 0],
      "backgroundColor": "#E86100"
   }, {
      "label": "Code Generator",
      "data": [60, 0, 0, 0, 0, 0],
      "backgroundColor": "#F81894"
   }, {
      "label": "Electronic Brain",
      "data": [0, 0, 0, 0, 0, 0, 240],
      "backgroundColor": "#6cc4ee"
   }]
}, {
   "labels": ["M", "TU", "W", "TH", "F", "SA", "SU"],
   "datasets": [{
      "label": "Master Project. Second Part",
      "data": [0, 480, 360, 180, 240, 300, 480],
      "backgroundColor": "#D4AF37"
   }, {
      "label": "Guild Ideas - Learning Angular",
      "data": [0, 0, 240, 180, 120, 0, 60],
      "backgroundColor": "#C0C0C0"
   }, {
      "label": "Charts For Daily Progress",
      "data": [0, 180, 120, 180, 120, 120, 0],
      "backgroundColor": "#133a7c"
   }, {
      "label": "Project Manager",
      "data": [0, 180, 120, 120, 0],
      "backgroundColor": "#109618"
   }, {
      "label": "TOOYS",
      "data": [0, 180, 120, 0, 120, 0, 0],
      "backgroundColor": "#990099"
   }, {
      "label": "Web Pc Explorer",
      "data": [0, 0, 120, 180, 0, 120, 0],
      "backgroundColor": "#54161F"
   }, {
      "label": "Mind Maps Program",
      "data": [0, 0, 180, 180, 0, 0, 0],
      "backgroundColor": "#708238"
   }, {
      "label": "Chain System",
      "data": [0, 0, 180, 0, 0, 0],
      "backgroundColor": "#E86100"
   }, {
      "label": "Code Generator",
      "data": [0, 0, 0, 0, 0, 0],
      "backgroundColor": "#F81894"
   }, {
      "label": "Electronic Brain",
      "data": [0, 0, 0, 0, 0, 0, 240],
      "backgroundColor": "#6cc4ee"
   }]
}, {
   "labels": ["M", "TU", "W", "TH", "F", "SA", "SU"],
   "datasets": [{
      "label": "Master Project. Second Part",
      "data": [300, 480, 360, 180, 240, 300, 0],
      "backgroundColor": "#D4AF37"
   }, {
      "label": "Guild Ideas - Learning Angular",
      "data": [60, 0, 240, 180, 120, 0, 0],
      "backgroundColor": "#C0C0C0"
   }, {
      "label": "Charts For Daily Progress",
      "data": [60, 180, 120, 180, 120, 120, 0],
      "backgroundColor": "#133a7c"
   }, {
      "label": "Project Manager",
      "data": [120, 180, 120, 120, 0],
      "backgroundColor": "#109618"
   }, {
      "label": "TOOYS",
      "data": [0, 180, 120, 0, 120, 0, 0],
      "backgroundColor": "#990099"
   }, {
      "label": "Web Pc Explorer",
      "data": [0, 0, 120, 180, 0, 120, 0],
      "backgroundColor": "#54161F"
   }, {
      "label": "Mind Maps Program",
      "data": [0, 0, 180, 180, 0, 0, 0],
      "backgroundColor": "#708238"
   }, {
      "label": "Chain System",
      "data": [0, 0, 180, 0, 0, 0],
      "backgroundColor": "#E86100"
   }, {
      "label": "Code Generator",
      "data": [60, 0, 0, 0, 0, 0],
      "backgroundColor": "#F81894"
   }, {
      "label": "Electronic Brain",
      "data": [0, 0, 0, 0, 0, 0, 0],
      "backgroundColor": "#6cc4ee"
   }]
}, {
   "labels": ["M", "TU", "W", "TH", "F", "SA", "SU"],
   "datasets": [{
         "label": "Master Project. Second Part",
         "data": [300, 480, 360, 180, 240, 300, 0],
         "backgroundColor": "#D4AF37"
      }, {
         "label": "Guild Ideas - Learning Angular",
         "data": [60, 0, 240, 180, 120, 0, 0],
         "backgroundColor": "#C0C0C0"
      },
      {
         "label": "Master Homework",
         "data": [60, 90, 60, 90, 120, 0, 0],
         "backgroundColor": "#39FF14"
      }, {
         "label": "Charts For Daily Progress",
         "data": [60, 180, 120, 180, 120, 120, 0],
         "backgroundColor": "#133a7c"
      }, {
         "label": "Project Manager",
         "data": [120, 180, 120, 120, 0],
         "backgroundColor": "#109618"
      }, {
         "label": "TOOYS",
         "data": [0, 180, 120, 0, 120, 0, 0],
         "backgroundColor": "#990099"
      }, {
         "label": "Web Pc Explorer",
         "data": [0, 0, 120, 180, 0, 120, 0],
         "backgroundColor": "#54161F"
      }, {
         "label": "Mind Maps Program",
         "data": [0, 0, 180, 180, 0, 0, 0],
         "backgroundColor": "#708238"
      }, {
         "label": "Chain System",
         "data": [0, 0, 180, 0, 0, 0],
         "backgroundColor": "#E86100"
      }, {
         "label": "Code Generator",
         "data": [60, 0, 0, 0, 0, 0],
         "backgroundColor": "#F81894"
      }, {
         "label": "Electronic Brain",
         "data": [0, 0, 0, 0, 0, 0, 0],
         "backgroundColor": "#6cc4ee"
      }
   ]
}, {
   "labels": ["M", "TU", "W", "TH", "F", "SA", "SU"],
   "datasets": [{
         "label": "Master Project. Second Part",
         "data": [0, 30, 45, 0, 0, 0, 0],
         "backgroundColor": "#D4AF37"
      }, {
         "label": "Guild Ideas - Learning Angular",
         "data": [0, 0, 0, 0, 0, 0, 0],
         "backgroundColor": "#C0C0C0"
      },
      {
         "label": "Master Homework",
         "data": [0, 0, 0, 0, 0, 0, 0],
         "backgroundColor": "#39FF14"
      }, {
         "label": "Charts For Daily Progress",
         "data": [0, 0, 216, 0, 0, 0, 0],
         "backgroundColor": "#133a7c"
      }, {
         "label": "Project Manager",
         "data": [0, 0, 0, 0, 0, 0, 0],
         "backgroundColor": "#109618"
      }, {
         "label": "TOOYS",
         "data": [0, 0, 0, 0, 0, 0, 0],
         "backgroundColor": "#990099"
      }, {
         "label": "Web Pc Explorer",
         "data": [0, 0, 0, 0, 0, 0, 0],
         "backgroundColor": "#54161F"
      }, {
         "label": "Mind Maps Program",
         "data": [0, 0, 0, 0, 0, 0, 0],
         "backgroundColor": "#708238"
      }, {
         "label": "Chain System",
         "data": [0, 0, 0, 0, 0, 0],
         "backgroundColor": "#E86100"
      }, {
         "label": "Code Generator",
         "data": [0, 0, 0, 0, 0, 0],
         "backgroundColor": "#F81894"
      }, {
         "label": "Electronic Brain",
         "data": [0, 0, 0, 0, 0, 0, 0],
         "backgroundColor": "#6cc4ee"
      }, {
         "label": "Learning Git",
         "data": [0, 0, 50, 0, 0, 0, 0],
         "backgroundColor": "#f9e4b6"
      }, {
         "label": "Preparation for the master class",
         "data": [0, 0, 0, 0, 0, 0, 0],
         "backgroundColor": "#5D4037"
      }, {
         "label": "ZeroPlayers",
         "data": [0, 0, 300, 0, 0, 0, 0],
         "backgroundColor": "#CD7F32"
      }
   ]
}]

正确放置json文件的路径以进行AJAX调用

0 个答案: