ChartJS绘制柱状图时无数据显示且图例为undefined如何解决

问题原因 #

• 数据集未配置label属性，直接导致图例显示为undefined
• 若你使用的是ChartJS 2.x版本，该版本本身不支持parsing配置项，无法自动从对象数组中解析x、y轴对应字段，是图表无数据展示的核心原因

解决方案 #

方案1：ChartJS 3.x及以上版本适用

仅需要给dataset补充label属性即可正常运行，修改后代码如下：

var default_data = [
    {
        "year":"Total",
        "gnis_id":"1009494",
        "geometry":"MULTIPOLYGON",
        "metadata":"NA",
        "number_of_records":1,
        "parkname":"NA",
        "region":"NT",
        "state":"NC",
        "unit_code":"BLRI",
        "unit_name":"Blue Ridge Parkway",
        "unit_type":"Parkway",
        "visitors":871922828},
    {
        "year":"Total",
        "gnis_id":"255952",
        "geometry":"MULTIPOLYGON",
        "metadata":"http://nrdata.nps.gov/programs/Lands/GOGA_metadata.xml",
        "number_of_records":1,
        "parkname":"Golden Gate",
        "region":"PW",
        "state":"CA",
        "unit_code":"GOGA",
        "unit_name":"Golden Gate National Recreation Area",
        "unit_type":"National Recreation Area",
        "visitors":611031225
    }
];

var ctx = document.getElementById('chart2').getContext('2d');

var chart2 = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            label: '游客总量', // 补充label配置
            data: default_data,
            parsing: {
                xAxisKey: 'unit_name',
                yAxisKey: 'visitors'
            }
        }]
    },
    options: {
        
    }
});

方案2：ChartJS 2.x版本适用

2.x版本不支持自动解析对象数组，需要手动提取x轴标签和对应y轴数值，修改后代码如下：

var default_data = [
    {
        "year":"Total",
        "gnis_id":"1009494",
        "geometry":"MULTIPOLYGON",
        "metadata":"NA",
        "number_of_records":1,
        "parkname":"NA",
        "region":"NT",
        "state":"NC",
        "unit_code":"BLRI",
        "unit_name":"Blue Ridge Parkway",
        "unit_type":"Parkway",
        "visitors":871922828},
    {
        "year":"Total",
        "gnis_id":"255952",
        "geometry":"MULTIPOLYGON",
        "metadata":"http://nrdata.nps.gov/programs/Lands/GOGA_metadata.xml",
        "number_of_records":1,
        "parkname":"Golden Gate",
        "region":"PW",
        "state":"CA",
        "unit_code":"GOGA",
        "unit_name":"Golden Gate National Recreation Area",
        "unit_type":"National Recreation Area",
        "visitors":611031225
    }
];
// 手动提取x轴标签和y轴数据
var xLabels = default_data.map(item => item.unit_name);
var visitorData = default_data.map(item => item.visitors);

var ctx = document.getElementById('chart2').getContext('2d');

var chart2 = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: xLabels,
        datasets: [{
            label: '游客总量',
            data: visitorData
        }]
    },
    options: {
        
    }
});

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