Question

嗨，我正在尝试使用 csv 数据绘制 chart.js 折线图，我是 html 和 javascript 的完全初学者，我一直在尝试让图表 js 读取 csv 数据以绘制线条，最后接近于得到了一些东西，但最终得到了错误：Uncaught SyntaxError: Unexpected identifier 错误计数不断增加：

我已经搜索并阅读了许多关于此问题的帖子，但仍然无法弄清楚代码有什么问题。

这是有问题的代码：

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { 
  box-sizing: border-box;
}
/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
   
  height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
    <script src="https://code.jquery.com/jquery-git1.min.js"></script>
     <script>
            $(document).on('change','.fx',function(){
       //var widget = changeFX(this.value);
        document.getElementById('content').src = "chart1.html?value="+this.value;
        document.getElementById('content').style.display = "block";
       });
</script>
<style>
  iframe{
    height:100%;
    width:100%;
    display:none;
  }
</style> 
  </head>
  <body>

<div class="row">
  <div class="column"  >
   <select name="fx" class="fx">
    <option value="EURUSD">EURUSD</option>
    <option value="EURJPY">EURJPY</option>
    <option value="EURGBP">EURGBP</option>
</select>
<iframe src="chart1.html"   id="content" >
</iframe>
<div>
    <canvas id="myChart" width="600" height="400"></canvas>
    <script>
      const makeChart = async () => {
        const ctx = document.getElementById("myChart").getContext("2d");
        const csvData = await getData();
    setInterval(csvData,1);
        const { dataLabels, columnFive, columnSix } = csvData;
        const myChart = new Chart(ctx, {
          type: "line",
          data: {
            labels: dataLabels,
            datasets: [
              {
                label: "Long Lots",
                data: columnFive,
                fill: false,
                borderColor: "green",
         pointRadius: 0,

              },
              {
                label: "Short Lots",
                data: columnSix,
                fill: false,
                borderColor: "red",
        pointRadius: 0,
          gridLines: {
                lineWidth: 0
            }
              },
            ],
          },
        });
      };
      window.addEventListener("load", makeChart);
      const getData = async () => {
        const data = await fetch("http://localhost:46920/myfile.csv", { mode: 'no-cors' }).then((res) => res.text());
        const dataLabels = [];
        const columnFive = [];
        const columnSix = [];
        const rows = data.split("\n");
        rows.map((row) => {
          const cols = row.split(",");
          dataLabels.push(cols[0]);
          columnFive.push(parseFloat(cols[5]));
          columnSix.push(parseFloat(cols[6]));
        });
        return { dataLabels, columnFive, columnSix };
      };
    </script>
 </div>
  </div>
  </body>
</html>

这是我目前在图表方面得到的：

非常感谢您的帮助

Update1：点击错误，然后点击 index.html 不做任何事情，错误只会不断增加（错误计数）

可以找出为什么我收到 Uncaught SyntaxError: Unexpected identifier

0 个答案: