图表创建后下拉菜单消失

我的意图是从csv文件开发饼图。观点是标题。我的代码需要csv文件。标题将作为选项存储在下拉菜单中。当选择下拉菜单项目时，将显示所选透视图的可视化。 csv文件的示例如下：图表创建后下拉菜单消失

,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

我的代码如下：

<!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>

这几乎是正确的。但是，点击任何项目后，下拉菜单消失。

来源

2017-03-08 Echchama Nayak

原因实际上是因为您的ID与“容器”ID不正确关闭。这意味着浏览器正在解释select标签实际上在容器div中。与您的图表一起被覆盖的同一个容器div。

如果更改以下来自：

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

要：

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

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

在顺便说一句，你的JavaScript代码是非常难以遵循，主要是因为有很多奇怪的缩进去上。请参阅airBnB's JavaScript style guide以获取有关使您的代码更易于他人阅读的信息。

来源

2017-03-08 03:18:10 Trujllo

我把你的代码放到JSBin中 - 检查出来，它的工作和它很酷 - http://output.jsbin.com/hobawir/1/ – Trujllo

图表创建后下拉菜单消失

回答

相关问题