亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用JS獲取csv文件并在圖表Js中顯示數據

使用JS獲取csv文件并在圖表Js中顯示數據

慕田峪9158850 2023-07-06 14:59:50
我有本地 cvs 文件,我嘗試獲取數據并將它們顯示在圖表 Js 中,但我無法讀取此數據。這是代碼enter code here** ``` const xlabel=[]; 常量 ytemp=[]; 圖表();? ? ? ? async function chartIt(){? ? ? ? ? ?await getDatach();? ? ? ?? ? ? ? const ctx = document.getElementById('myChart').getContext('2d');? ? ? ??? ? ? ? const myChart = new Chart(ctx, {? ? ? ? ? ? type: 'line',? ? ? ? ? ? data: {? ? ? ? ? ? ? ? labels:xlabel,? ? ? ? ? ? ? ? datasets: [{? ? ? ? ? ? ? ? ? ? label: 'some data',? ? ? ? ? ? ? ? ? ? data: ytemp,? ? ? ? ? ? ? ? ? ? fill:false,? ? ? ? ? ? ? ? ? ? backgroundColor: 'rgba(255, 99, 132, 0.2)' ,? ? ? ? ? ? ? ? ? ? borderColor: 'rgba(255, 99, 132, 1)',? ? ? ? ? ? ? ? ? ? borderWidth: 1? ? ? ? ? ? ? ? }]? ? ? ? ? ? }? ? ? ? });? ? }? ? ???async function getDatach(){?const response = await fetch('ZonAnn.Ts+dSST.csv');?const data=await response.text();?const rows=data.split('\n').slice(1);?table.forEach(row => {? ? const columns=elt.split(',');? ? const year=columns[0];? ? xlabel.push(year);? ? const temp=columns[1];? ? ytemp.push( parseFloat (temp)+14);? ? Console.log(year,temp);});}**
查看完整描述

1 回答

?
白豬掌柜的

TA貢獻1893條經驗 獲得超10個贊

我通過使用實時服務器解決了這個問題


<html>

    <head>

<meta charset="UTF-8"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>

    </head>

    <body>

        <canvas id="myChart" width="400" height="200"></canvas>


        <script>

            const xlabel=[];

            const ytemp=[];

            chartIt();

            

            async function chartIt(){

               await getDatach();

           

            const ctx = document.getElementById('myChart').getContext('2d');

            

            const myChart = new Chart(ctx, {

                type: 'line',

                data: {

                    labels:xlabel,

                    datasets: [{

                        label: 'some data',

                        data: ytemp,

                        fill:false,

                        backgroundColor: 'rgba(255, 99, 132, 0.2)' ,

                        borderColor: 'rgba(255, 99, 132, 1)',

                        borderWidth: 1

                    }]

                }

            });


        }

          

     async function getDatach(){


     const response = await fetch('ZonAnn.Ts+dSST.csv');

     const data=await response.text();

 

     const table=data.split('\n').slice(1);

     table.forEach(row => {

        const columns=row.split(',');

        const year=columns[0];

        xlabel.push(year);

        const temp=columns[1];

        ytemp.push( parseFloat (temp)+14);

        

    });

    

 }

            </script>

       

    </body>

</html>



查看完整回答
反對 回復 2023-07-06
  • 1 回答
  • 0 關注
  • 271 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號