Highcharts折线图无数据线条显示问题求助

问题根源 #

代码中yAxis的min和max被设置为字符串类型（'40'、'60'），而Highcharts要求轴范围值必须是数字类型。类型不匹配会导致图表无法正确识别数据点的位置，最终隐藏了折线，仅保留图表框架元素。

修复方案 #

将yAxis配置里的min和max改为数字格式：

yAxis: {
    min: 40, // 移除引号，改为数字
    max: 60, // 移除引号，改为数字
    title: {
        text: 'Percentage Awarded',
        style: {"font-family": "'Open Sans', sans-serif", "color": "#373737","fontSize": "16px", "fontWeight":"bold"},
    },
    plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
    }]
},

修复后完整代码 #

$(function () {
$('#container101').highcharts({
    chart: {
        type: 'line',
        spacingBottom: 5,
        spacingTop: 15,
        spacingLeft: 35,
        spacingRight: 35
    },
    title: {
        text: 'Graduation Diploma Types Awarded by Year',
        style: {"font-family": "'Open Sans', sans-serif", "color": "#373737","fontSize": "24px", "fontWeight":"bold"}
    },
    xAxis: {
        categories: ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021'],
        crosshair: true
    },
    yAxis: {
        min: 40,
        max: 60,
        title: {
            text: 'Percentage Awarded',
            style: {"font-family": "'Open Sans', sans-serif", "color": "#373737","fontSize": "16px", "fontWeight":"bold"},
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '%',
        borderColor: 'gray',
        borderRadius: 10,
        shadow: false
    },
    credits: {
        enabled: false
    },
    legend: {
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'bottom',
        borderWidth: 0,
        itemMarginBottom: 20,
        itemStyle: {"font-family": "'Open Sans', sans-serif", "color": "#373737","fontSize": "16px", "fontWeight":"bold"}
    },
    series: [{
        name: 'Advanced/CCR/Honors Diploma',
        color: '#01a2d7',
        data: [46, 45, 48, 49, 50, 50, 52, 47, 49, 49, 50, 49],
        marker: {
                fillColor: '#FFFFFF',
                lineWidth: 2,
                lineColor: '#01a2d7'
            }
    }, {
        name: 'Standard Diploma',
        color: '#01519c',
        data: [51, 52, 51, 50, 50, 50, 48, 53, 51, 51, 50, 51],
        marker: {
                fillColor: '#FFFFFF',
                lineWidth: 2,
                lineColor: '#01519c'
            }
    }]
});
});

补充说明 #

这类问题多由代码维护时的小失误引发，Highcharts处理字符串类型的轴范围不会抛出明显报错，但会导致数据渲染异常。修复类型匹配问题后，折线和数据点即可正常显示。

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