Javascript 如何从CSV创建行Hightchart，其中两列数据用作工具提示文本？

这是一个多部分的问题，请原谅问题的长度

我正在尝试创建一个图表，将患者的身高、体重和BMI绘制为多个日期的单独系列。在迁移到服务器之前，我想使用CSV拉入数据进行测试。我正试图让它像这样工作，但到目前为止还没有成功

以下是我的代码的一个版本，其中包含硬编码的数据：

$(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);
});

我不太精通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);

$（函数（）{
变量选项={
图表：{
renderTo:'容器'，
类型：“行”
},
标题：{
文本：“患者测量”
},
xAxis：{
类别：[]
},
亚克斯：{
标题：{
文本：“测量”
}
},
系列：[]
};
var data=“ID；患者姓名；数据日期；平均身高；平均体重；BMI；体重状况\n”+“1；美国能源部，约翰；2012-12-29 00:00:00；65；185；30.7822485207101；肥胖\n”+“1；美国能源部，约翰；2013-01-12 00:00:00；65；184；30.61588579881657；肥胖\n”+“1；美国能源部，约翰；2013-02-09 00:00:00；65；181；30.1166905325；肥胖”；
//分道扬镳
变量行=data.split（'\n'）；
var first=lines.shift（）.split（“；”）；
var系列_持有人=[]；
$.each（行，函数）（行号，行）{
var items=line.split（“；”）；
$。每个（项目，功能（项目编号，项目）{
如果（itemNo==3）{
选项.xAxis.categories.push（项目）；
}
否则如果（itemNo>3&&itemNo<7）{
series_holder[itemNo-4].data.push（parseFloat（item））；
}
});
});      
对于（变量i=4；i

}))

x轴应为date_date下的日期值

系列/线路应如下所示：

高度

重量

体重指数

打印点的数据位于标题行后的索引4（平均高度）至6（BMI）列中

这是一个我要做的与我想做的相似的示例…我只是不能让它为我的特定数据工作

---

现在，我将暂缓回答问题的工具提示和CSV部分。我真的很想让我的一些东西发挥作用，这样我就知道我在正确的轨道上了。

这不是一个完整的答案，但更多的是一个提示：Highcharts有一个插件（modules/data.src.js），可以处理csv数据的解析，应该让你开始。它将自动使用列名作为序列名，并尝试猜测列的类型（datetime/number/category）

请查看上的src，以及位于以下位置的演示示例：

---

你的问题必须更具体。。我问的三个问题是同一个问题的一部分。第一个问题是，如何使图表适用于我在js中直接提供的示例数据。第二个问题是，如果我从外部CSV文件导入数据，如何使图表工作。第三个问题是，如何使CSV数据中的前两列在每个打印点的工具提示中显示为附加文本。正如我在文章中所解释的，应该有3个系列，身高、体重和BMI各一个，其中头两列数据，在标题行之后，需要出现在工具提示中。这有帮助吗？就像你说的，这不是一个完整的答案，但我可以看到它是有用的，所以谢谢你让我知道。我很清楚，示例中的csv:document.getElementById（'csv1'）.innerHTML，我可以使用url（）导入csv，对吗？csv属性应该是包含csv的字符串。因此，如果url（）函数返回这样一个字符串，那么它应该可以工作。

$(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);

$('#container1').highcharts({
    data: {
        csv: document.getElementById('csv1').innerHTML
    },
    title: {
        text: 'Categorized CSV data'
    }
});