基于Highcharts、JQuery与CSV的三线图表标签错位问题求助

你的核心问题是CSV数据的解析逻辑搞反了——把速度指标当成了X轴分类，时间当成了系列名称。下面是修正后的完整代码，以及关键改动说明：

修正后的代码 #

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Velocità Vento m/s</title>
        <!-- 引入依赖库 -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>
        
        <script type="text/javascript">
        jQuery(document).ready(function() { 
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'line'
                },
                title: {
                    text: 'Velocità Vento m/s'                  
                },
                subtitle: {
                    text: 'Ultime 48h'
                },
                xAxis: {
                    categories: [],
                    labels: {
                        format: '{value}'
                    }
                },
                yAxis: {
                    title: {
                        text: 'm/s'
                    }
                },
                // 提前初始化三个速度指标的系列结构
                series: [
                    { name: 'SPEED_MED', data: [] },
                    { name: 'SPEED_MAX', data: [] },
                    { name: 'SPEED_MIN', data: [] }
                ]
            };
            
            $.get('/public/grafici/data/File.csv', function(data) {
                var lines = data.split('\n');
                $.each(lines, function(lineNo, line) {
                    line = line.trim(); // 去除首尾空格，避免空行干扰
                    if (!line) return; // 跳过空行
                    
                    var items = line.split(',');
                    
                    // 处理表头：直接跳过，因为已提前定义系列
                    if (lineNo === 0) {
                        return;
                    }
                    
                    // 第一列是时间，加入X轴分类
                    var time = items[0];
                    options.xAxis.categories.push(time);
                    
                    // 把对应速度值推入各自系列的data数组
                    options.series[0].data.push(parseFloat(items[1])); // SPEED_MED
                    options.series[1].data.push(parseFloat(items[2])); // SPEED_MAX
                    options.series[2].data.push(parseFloat(items[3])); // SPEED_MIN
                });
                
                var chart = new Highcharts.Chart(options);
            });         
        });
        </script>
        
    </head>
    <body>
        <div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>      
    </body>
</html>

关键改动说明 #

• 提前定义系列：在配置项里直接创建三个对应速度指标的系列对象，从根源避免映射关系混乱
• 调整X轴数据来源：把每行的Data列（时间）加入X轴的categories数组，作为横轴标签
• 修正数据映射逻辑：不再将时间作为系列名称，而是将每行的三个速度值分别对应到三个系列的data数组中
• 空行处理：添加trim()和空行判断，避免CSV末尾空行导致的解析错误

你的CSV数据参考 #

Data,SPEED_MED,SPEED_MAX,SPEED_MIN
2024-03-30 12:00:00,5.1,11.2,0.8
2024-03-30 13:00:00,8.1,17.5,2.0
2024-03-30 14:00:00,4.2,13.9,0.0
2024-03-30 15:00:00,3.7,9.0,0.0
2024-03-30 16:00:00,5.0,11.2,0.8

内容的提问来源于stack exchange，提问作者T1f0n3