Dropdown-Menü verschwindet, nachdem das Diagramm erstellt wurde

Meine Absicht ist es, ein Tortendiagramm aus einer CSV-Datei zu entwickeln. Die Perspektiven sind die Header. Mein Code nimmt die CSV-Datei. Die Kopfzeilen sind als Optionen im Dropdown-Menü zu speichern. Wenn ein Dropdown-Menü ausgewählt ist, wird eine Visualisierung der ausgewählten Perspektive angezeigt. Eine Probe der CSV-Datei ist wie folgt:Dropdown-Menü verschwindet, nachdem das Diagramm erstellt wurde

,org_title,role_title,continent,country,updated_at_date 
1,Startup,Founder,Oceania,Australia,27/06/2016 
2,SME,C-Level/Owner,Oceania,Australia,27/06/2016 
3,School/University,Student,Oceania,Australia,27/06/2016 
4,School/University,Student,South America,Brazil,27/06/2016 
5,Government Department,other,Asia,Philippines,28/06/2016 
6,other,other,Asia,Singapore,27/06/2016 
7,Non Profit Organisation,other,Asia,Malaysia,27/06/2016 
8,Non Profit Organisation,other,Asia,Mongolia,27/06/2016

Mein Code ist wie folgt:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    </head> 
    <body> 
    <script src="https://code.highcharts.com/highcharts.js"></script> 
    <script src="https://code.highcharts.com/modules/exporting.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <input type="file" id="file" name="file"/> 
    <div id='container'/> 
    <select id='options'/> 
    <script> 

$('#options').change(function() { 
var v =this.value; 
var res=[]; 
Object.keys(CSVARRAY[v]).forEach(function(k) { 
res.push({'name':k,'y':CSVARRAY[v][k]}); 
}); 
console.log(JSON.stringify(res)); 

Highcharts.chart('container', { 
    chart: { 
     plotBackgroundColor: null, 
     plotBorderWidth: null, 
     plotShadow: false, 
     type: 'pie' 
    }, 
    plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: true, 
       format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
       style: { 
        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
       } 
      } 
     } 
    }, 
    series: [{ 
     data: res 
    }] 
}); 

}); 

//Selecting file and converting it to tabular form 
     var file = document.getElementById('file'); 
    var CSVARRAY; 
     file.addEventListener('change', function() { 
      var reader = new FileReader(); 
      var f = file.files[0]; 
      reader.onload = function(e) { 
       CSVARRAY = parseResult(e.target.result); //this is where the csv array will be 
      }; 
      reader.readAsText(f); 
     }); 


    function parseResult(result) { 

      var res = result.split("\n"); 
      var headers = res[0].split(','); 
      headers.shift(); 
      res.shift(); 
      var d = {}; 
     var prev={}; 
      headers.forEach(function(h) { 
       d[h] = {}; 
       prev[h] = [];  
      }); 

      res.forEach(function(row) { 
       var i=0; 
       var r = row.split(","); 
       r.shift(); 

       r.forEach(function(cell) { 
        if (cell !== prev[headers[i]]) 
        { 
         d[headers[i]][cell]=[]; 
         d[headers[i]][cell]=[]; 
        d[headers[i]][cell]=1; 
        } 
        else 
        { 
        d[headers[i]][cell]+=1; 
        } 
        prev[headers[i]]=cell; 
        i += 1; 
       }); 

      }); 
      //return resultArray; 
      var options = $("#options"); 
headers.forEach(function(h) { 
    options.append($("<option />").val(h).text(h)); 

}); 
    return d; 
     } 
    </script> 
    </body> 
</html>

Es ist fast richtig ist. Das Dropdown-Menü verschwindet jedoch, nachdem ich auf ein Element geklickt habe.

Quelle

2017-03-08 Echchama Nayak

Der Grund ist eigentlich, weil Ihr div mit der ID "Container" nicht korrekt geschlossen ist. Dies bedeutet, dass der Browser interpretiert, dass das select-Tag tatsächlich innerhalb des Container-Divs ist. Das gleiche Container-Div, das mit Ihrem Diagramm überschrieben wird.

Wenn Sie die folgenden von ändern:

<div id='container'/> 
// javascript references are here 
<select id='options'/>

An:

<input type="file" id="file" name="file"/> 
<div id='container'> 

</div> 
// javascript references are here 
<select id='options'/>

Auf Nebenbei bemerkt, Ihren JavaScript-Code ist sehr schwer zu folgen, vor allem, weil es eine Menge seltsame Einrücken ist los auf. Sehen Sie sich airBnB's JavaScript style guide an, um Informationen zu erhalten, die Ihren Code für andere leichter lesbar machen.

Quelle

2017-03-08 03:18:10 Trujllo

Ich habe Ihren Code in JSBin - überprüfen Sie es, seine Arbeit und es ist ziemlich cool - http://output.jsbin.com/hobawir1/1/ – Trujllo

Dropdown-Menü verschwindet, nachdem das Diagramm erstellt wurde

Antwort

Verwandte Themen