我想在JS FIDDLE中创建条形图可视化，将每个类别的消费者可视化为“ Q1 / 18（TTM）年度客人价值”和“第一次与第二次访问之间的天数”，即：['1'，'2' ，.....'29+']。条形图应如下所示（图例涵盖了第一类，但我将修复此问题）：
我假设数据已经存在于CSV中，如下所示：
我有一个界面，允许用户导入CSV文件。是这里：
// The event listener for the file upload
document.getElementById('txtFileUpload').addEventListener('change', upload, false);
// Method that checks that the browser supports the HTML5 File API
function browserSupportFileUpload() {
var isCompatible = false;
if (window.File && window.FileReader && window.FileList && window.Blob) {
isCompatible = true;
}
return isCompatible;
}
function upload(evt) {
if (!browserSupportFileUpload()) {
alert('The File APIs are not fully supported in this browser!');
} else {
var data = null;
var file = evt.target.files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(event) {
var csvData = event.target.result; //alert(csvData);
var data2 = csvData.split("\n"); //alert(data2);
var i;
for (i = 0; i < data2.length; ++i) {
// here's the data row separated by commas
alert(i+': '+data2[i]);
// call your ajax and submit this one row
// now wait for response
// if not error:
// advance progress bar, and number converted, etc in modal
// else:
// show error message
}
if (data2 && data2.length > 0) {
alert('Imported -' + data2.length + '- rows successfully!');
} else {
alert('No data to import!');
}
};
reader.onerror = function() {
alert('Unable to read ' + file.fileName);
};
}
}<h1>File Upload Test</h1>
<p>
<div id="dvImportSegments" class="fileupload ">
<fieldset>
<legend>Select the CSV file to upload</legend>
<input type="file" name="File Upload" id="txtFileUpload" accept=".csv" />
</fieldset>
</div>
</p>
然后，我使用.get（）引入变量csvData（来自上面代码中的函数），然后我将使用parseCSVData函数对其进行解析（该函数编写如下）。然后，我将制作数据的条形图。这是我这部分的代码：
$.get(csvData, function (csvFile) { //retrieve csvData from other function above
var data = parseCSVData(csvFile);
//create the chart
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: null,
align: 'center',
verticalAlign: 'bottom',
},
xAxis: {
categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11-17', '18-28', '29+'],
title: {
text: 'Visits Per Customer (TTM)'
},
},
yAxis: {
min: 0,
gridLineWidth: 0,
minorGridLineWidth: 0,
title: {
text: 'Average Return Rate Overall: 64 Days',
y: 10
},
labels: {
overflow: 'justify'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.0f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
}
}
},
legend: {
layout: 'horizontal',
align: 'right',
verticalAlign: 'top',
x: -25,
y: 5,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Q1 / 18 (TTM) Annual Guest Value',
//data: 2nd column of CSV file
color: 'grey',
// label color
dataLabels: {
style: {
color: 'grey'
}
}
}, {
name: 'Days Between 1st and 2nd Visits',
//data: 3rd Column of CSV file
color: 'green',
// label color
dataLabels: {
style: {
color: 'green'
}
}
}]
})
})
function parseCSVData (csvFile){
//empty array for storing the chart data
var guestvalue_and_visits = []; //2nd and 3rd column extraction
var lines = csvFile.split("\n");
$.each(lines, function (lineNumber, line){
if(lineNumber != 0) { //skipping header lines
var fields = line.split(",");
var a = parseFloat(fields[1]); // this is guest value
var b = parseFloat(fields[2]); //this is days between visit
guestvalue_and_visits.push([a , b]);
}
})
return guestvalue_and_visits.reverse();
}<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>我的问题是：
我需要解析的数据的正确形式是什么？是var data2 = csvData.split（“ \ n”）还是var csvData = event.target.result？
我是否在.get（）中正确引入了变量csvData（如果合适的话，请输入data2）？我不是Java语言方面的专家，但是我很确定例如csvData变量是reader.onload = function（event）{}的局部变量，因此我将需要某种方式访问此局部变量。我该如何正确地将其放入.get（）？只需编写.get（csvData，function（csvFile）{）就可以了吗？
另外，如果您查看“系列”下的“数据”属性，我将其留空，因为我不知道如何将guestvalue_and_visits变量中的数据带入Highcharts代码中。 （我做了guestvalue_and_visits.push（[a，b]，因为这是Highcharts接受的形式。）我想从数据结构中提取'a'和'b'部分，并将它们放在'系列”。我该怎么做？
最后但并非最不重要的一点是，将所有内容放在一起，我如何允许该界面到FIRST，以便允许用户上传CSV文件，然后在上传该文件时，该界面将变为Highcharts条形图？我需要编写某种代码来做到这一点吗？
最佳答案
我需要解析的数据的正确形式是什么？它是var吗
data2 = csvData.split（“ \ n”）还是var csvData =
event.target.result？
对于您的情况，我建议您在CSV字符串解析器中分隔类别和系列数据，并返回两个不同的系列，其中包括数据，如下所示：
var parseCSV = function(csv) {
var lines = csv.split("\n").map(line => line.split(",")) // split string to lines
var categories = []
var series = [{
name: 'Q1 / 18 (TTM) Annual Guest Value',
color: 'grey',
data: [],
dataLabels: {
style: {
color: 'grey'
}
}
}, {
name: 'Days Between 1st and 2nd Visits',
color: 'green',
data: [],
dataLabels: {
style: {
color: 'green'
}
}
}]
// Parse every line of csv file.
lines.forEach((line, i) => {
if (i !== 0) {
var cat = line[0].slice(1, -1)
var p1 = parseFloat(line[1])
var p2 = parseFloat(line[2])
categories.push(cat)
series[0].data.push(p1)
series[1].data.push(p2)
}
})
// return the object with categories and series
return {
categories: categories,
series: series
}
}
然后只需分配类别和系列：
var parsedCSV = parseCSV(csv)
Highcharts.chart('container', {
xAxis: {
categories: parsedCSV.categories
},
series: parsedCSV.series
})
我是否在.get（）中正确引入了变量csvData（如果合适的话，请输入data2）？我不是Java语言方面的专家，但是我很确定例如csvData变量是reader.onload = function（event）{}的局部变量，因此我将需要某种方式访问此局部变量。我该如何正确地将其放入.get（）？只需编写.get（csvData，function（csvFile）{）就可以了吗？
我看不到您的整个项目结构，但是，是的，
csvData和data2变量范围仅限于reader.onload函数，因此，除此事件函数外，您无法在任何地方调用get()。最后但并非最不重要的一点是，将所有内容整合在一起，我将如何允许
FIRST的界面允许用户上传CSV文件，然后在
它被上传后，界面会变为Highcharts条形图吗？
我需要编写某种代码来做到这一点吗？
实际上，我认为生成图表的过程应如下所示：
生成一个空图表（或带有一些初始数据）
从文件获取CSV
解析您拥有的CSV
解析后，只需使用
categories方法用新的series和整个Chart.update()对象更新图表。API参考：https://api.highcharts.com/class-reference/Highcharts.Chart#update
实时示例以正确的方式解析数据：http://jsfiddle.net/db0vsgmh/