Question

我需要从输入文件中以任何格式创建图形。我在某个地方写了一些代码。

这是使用javascript，html，css。使用某些函数和事件侦听器进行了尝试，并完成了50％的任务，以尝试剩下的部分代码。

<!DOCTYPE html>
<html>
<body>
<input type="file" id="files" name="file" />
<div id="container" style="height: 500px; min-width: 500px"></div> 
<div class="container">
    <canvas id="myChart"></canvas>
</div>
<script>
    function Handleselectedfile(fobj)
{
    var files = fobj.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++)
    {

        var reader = new FileReader();
        reader.onload = function(event)
        {
            // NOTE: event.target point to FileReader
            var contents = event.target.result;
            lines = contents.split('\n',);
            console.log(contents)
            console.log(lines)
            //////
            document.getElementById('container').innerHTML=contents;
            return lines
        };

        reader.readAsText(f);
    }
}
document.getElementById('files').addEventListener('change', Handleselectedfile, false);
var result = Handleselectedfile(fobj);
document.write(result);
</script>
</body>
</html>

我想使用函数“ Handleselectedfile（fobj）”的结果来创建图形

Answer 1

完成“ youtube”中的javascript课程后，我使用

编写了代码

“ addEventListener”，“ Filereader”，“。onload”，“。includes”，“。push”，“ for”和 “如果”语句。对于图，我使用了chart.js工具

**

这是我的代码。

**

<!DOCTYPE html>
<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.6.0/Chart.min.js"></script> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="D:\HTML\SOURCE_CODE\Chart.min.js"></script>
  <title>My Chart.js Chart</title>
</head>

<body>


<input type="file" id="files" name="file" /> 


<div class="container">
    <canvas id="myChart"></canvas>
  </div>


<script>

    var labels_x=[]
    var labels_y=[]


    function Handleselectedfile(fobj)
{
    var files = fobj.target.files; // FileList object


    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++)
    {


        var reader = new FileReader();
        reader.onload = function(event)
        {
           // NOTE: event.target point to FileReader 
           var contents = event.target.result;
           var lines = contents.split('\n');
         //////////
            console.log(contents)
            console.log(typeof(Object.values(lines)))
            console.log(lines.length)
            console.log(lines)
            for(i=0;i<lines.length;i++){
                if(lines[i].includes(",")){
               var arr = lines[i].split(',');
               }else{
               var arr = lines[i].split('  ');
               }
                console.log(arr[0])
                console.log(JSON.parse(lines));
                console.log(arr)
                console.log(typeof(arr))

                labels_x.push(arr[0])
                labels_y.push(arr[1])
            }
//////////////////////////////////////////////////////////////////////////////////

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

        // Global Options
        Chart.defaults.global.defaultFontFamily = 'Lato';
        Chart.defaults.global.defaultFontSize = 18;
        Chart.defaults.global.defaultFontColor = '#777';

        let massPopChart = new Chart(myChart, {
      type:'line', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
      data:{
        labels:labels_x,
        datasets:[{
          label:'population',
          data:labels_y,
          //backgroundColor:'green',
          backgroundColor:[
            'rgba(255, 99, 132, 0.6)',
            'rgba(54, 162, 235, 0.6)',
            'rgba(255, 206, 86, 0.6)',
            'rgba(75, 192, 192, 0.6)',
            'rgba(153, 102, 255, 0.6)',
            'rgba(255, 159, 64, 0.6)',
            'rgba(255, 99, 132, 0.6)'
          ],
          borderWidth:1,
          borderColor:'#777',
          hoverBorderWidth:3,
          hoverBorderColor:'#000'
        }]
      },
      options:{
        title:{
          display:false,
          text:'Largest Polluted Cities',
          fontSize:25
        },
        legend:{
          display:false,
          position:'right',
          labels:{
            fontColor:'#000'
          }
        },
        layout:{
          padding:{
            left:50,
            right:0,
            bottom:0,
            top:0
          }
        },
        tooltips:{
          enabled:true
        }
      }
    });

    /////////////////////////////////////////////////////////////////////////////////////////////// 
        };
        reader.readAsText(f);
    }
}

  document.getElementById('files').addEventListener('change', Handleselectedfile, false);

</script>
</body>
</html>

如何使用javascript从任何给定格式的输入文件创建图形？

1 个答案:

这是我的代码。