这是一个多部分的问题，所以请原谅问题的长度。
我正在尝试创建一个图表，将患者的身高、体重和 BMI 绘制为多个日期的单独系列。我想在迁移到服务器之前使用 CSV 提取数据以进行测试。我试图让它类似于这个FIDDLE工作，但到目前为止还没有成功。
这是我的代码的一个版本，其中对数据进行了硬编码：
$(function () {
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Patient Measurements'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Measurements'
}
},
series: []
};
var data = "ID,PATIENT_NAME,DATA_DATE,HEIGHT,WEIGHT,BMI\n" +
"1,\"Doe,John\",1/1/2013 00:00:00,65,185,30.78224852\n" +
"1,\"Doe,John\",1/2/2013 00:00:00,65,184,30.61585799\n" +
"1,\"Doe,John\",2/1/2013 00:00:00,65,181,30.11668639\n" +
"1,\"Doe,John\",2/2/2013 00:00:00,65,180,29.95029585\n"
// Split the lines
var lines = data.split('\n');
var first = lines.shift().split(',');
var series_holder = [];
for (var = i, i < first.length, i++) {
var s = {
data: []
};
series_holder.push(s);
}
$.each (lines, function(lineNo, line) {
var items = line.split(',');
$.each (items, function(itemNo, item){
// If itemNo is the row/column iteration object, then start at column 2
if (itemNo >= 2) {
// Subtract the column from the itemNo to get a zero-based series_holder
series_holder[itemNo - 2].data.push(parseFloat(item));
}
});
});
options.series = series_holder;
var chart = new Highcharts.Chart(options);
});
该示例应绘制三条线（一条用于身高、体重和 BMI），每条线有四个数据点（针对每个日期）。
我知道我的示例中的数据不是根据 Highcharts 建议格式化的，但我需要能够从 CSV 中获取 ID 和 PATIENT_NAME 字段并在该系列的工具提示中使用它们，以便 ID 和 PATIENT_NAME 识别患者，无论您将鼠标悬停在哪个数据点上。我知道我可以将其显示在 DIV 或页面上的其他内容中，但我希望能够做到这一点，因为如果我能弄清楚如何使其工作，我可以在工具提示中显示其他内容.
通过查看 Highcharts 站点，我相信实现 CSV 代码所需要做的就是在上面的代码中添加以下代码而不是var data = "..."：
$.get(inputData, function(data) {
// Check for data
if (data.value != "") {
alert("No data to retrieve!");
return(0);
}
我不太精通 Javascript、jQuery 或 Highcharts，但我正在尽我所能快速学习。我意识到我的代码中可能存在许多错误（有些是故意的，比如 parseFloat 用于非浮点数据类型，所以我可以学习如何处理/解析不同的数据类型），所以我感谢大家的耐心。
谢谢你的帮助。我一直在玩这个，在进行了大量调试以确定如何处理数据之后，我想出了以下代码。我认为这可能是一个简化版本，可以更好地理解我的观点。
$(function () {
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Patient Measurements'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Measurements'
}
},
series: []
};
var data = "ID;PATIENT_NAME;DATA_DATE;AVG_HEIGHT;AVG_WEIGHT;BMI;WEIGHT_STATUS\n"+"1;DOE,JOHN;2012-12-29 00:00:00;65;185;30.7822485207101;Obese\n"+"1;DOE,JOHN;2013-01-12 00:00:00;65;184;30.6158579881657;Obese\n"+"1;DOE,JOHN;2013-02-09 00:00:00;65;181;30.1166863905325;Obese\n";
// Split the lines
var lines = data.split('\n');
var first = lines.shift().split(';');
var series_holder = [];
$.each (lines, function(lineNo, line) {
var items = line.split(';');
$.each(items, function(itemNo, item) {
if (itemNo == 3) {
options.xAxis.categories.push(item);
}
else if (itemNo > 3 && itemNo < 7) {
series_holder[itemNo-4].data.push(parseFloat(item));
}
});
});
for (var i = 4; i < first.length - 1; i++) {
var s = {
data: []
};
s.name = first[i].replace(/AVG_/g,"");
series_holder.push(s);
}
var chart = new Highcharts.Chart(options);
});
x 轴应该是 DATE_DATE 下的日期值。
系列/行应如下所示：
- 高度
- 重量
- 体重指数
绘图点的数据位于标题行之后的列索引 4 (AVG_HEIGHT) 到 6 (BMI) 中。
这是我要工作的一个示例小提琴，它与我想做的类似......我只是无法让它适用于我的特定数据。
我将暂时搁置问题的工具提示和 CSV 部分。我真的很想让我的东西工作，所以我知道我在正确的轨道上。