0
私の意図は、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>
それはほとんど正しいです。ただし、アイテムをクリックするとドロップダウンメニューが消えます。
私はあなたのコードをJSBinに入れています - それをチェックしてください。その作業と非常にクールです - http://output.jsbin.com/hobawir/1/ – Trujllo