Highcharts双Y轴多系列折线图第二轴数据不显示问题排查

我看了你的代码，发现两个关键问题导致第二Y轴的value系列没显示出来：

问题1：Weight数据未转为数值类型 #

你处理weightData时直接把CSV中的字符串存入数组，但Highcharts绘制折线图需要数值类型的数据，字符串会被自动忽略，导致第一个系列的渲染也有问题，进而影响第二个系列的显示。

问题2：plotOptions配置错误 #

你设置的plotOptions.column是针对柱状图的配置，但当前图表类型是spline（折线图），这个冗余配置不仅无效，还可能干扰折线图的正常渲染。

修正后的完整代码 #

<html>
<head>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    <div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>
    <script type="text/javascript">
        $.get('employeeData.csv', function(data) {
            var lines = data.split('\n');
            console.log(lines);
            
            var timeData = [];
            var weightData = [];
            var valueData = [];
            
            // 优化：一次遍历处理所有数据，避免重复循环
            $.each(lines, function(lineNo, lineContent){
                // 跳过表头和空行
                if(lineNo > 0 && lineContent.trim() !== '') {
                    var parts = lineContent.split(',');
                    timeData.push(parts[0]);
                    weightData.push(parseFloat(parts[1])); // 转为数值类型
                    valueData.push(parseFloat(parts[2])); // 直接取第三列，比substring更可靠
                }
            });
            
            console.log(timeData);
            console.log(weightData);
            console.log(valueData);
            
            Highcharts.chart('container', {
                chart: {
                    type: 'spline'
                },
                title: {
                    text: 'employee Data'
                },
                subtitle: {
                    text: 'firmA'
                },
                xAxis: {
                    categories: timeData,
                    crosshair: false
                },
                yAxis: [{
                    // Primary yAxis
                    labels: {
                        format: '{value}(g)',
                        style: {
                            color: Highcharts.getOptions().colors[1]
                        }
                    },
                    title: {
                        text: 'Weight',
                        style: {
                            color: Highcharts.getOptions().colors[1]
                        }
                    }
                }, {
                    // Secondary yAxis
                    title: {
                        text: 'secondary axis',
                        style: {
                            color: Highcharts.getOptions().colors[0]
                        }
                    },
                    labels: {
                        format: '{value} zCount',
                        style: {
                            color: Highcharts.getOptions().colors[0]
                        }
                    },
                    opposite: true // 右侧轴的配置是正确的
                }],
                tooltip: {
                    headerFormat: '<b>Time:</b> {point.x}<br/>',
                    pointFormat: '<b>{series.name}:</b> {point.y}<br/>'
                },
                // 替换为折线图的配置（可选，这里保留默认渲染逻辑）
                plotOptions: {
                    spline: {
                        marker: {
                            enabled: true // 可选：显示数据点标记
                        }
                    }
                },
                series: [{
                    name: 'Weight',
                    data: weightData
                }, {
                    name: 'value',
                    data: valueData,
                    yAxis: 1 // 指定绑定第二Y轴，这个配置是正确的
                }]
            });
        });
    </script>
</body>
</html>

额外优化说明 #

1. 合并三次数组遍历为一次，减少性能消耗
2. 增加空行过滤逻辑，避免CSV末尾空行导致的undefined数据问题
3. 改用数组索引直接取列值，比substring更适配规范的CSV格式

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