Question

我的目的是从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>

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

Answer 1

原因实际上是因为你的id为“容器”的div没有正确关闭。这意味着浏览器正在解释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，了解有关让您的代码更易于阅读的信息。

创建图表后，下拉菜单消失

1 个答案: