图表 JS 显示没有任何数据的空图表答案

【问题标题】：Chart JS showing empty chart without any data图表 JS 显示没有任何数据的空图表
【发布时间】：2021-09-19 00:36:10
【问题描述】：

我正在制作一个简单的 chart.js，它为我提供了一个默认图表，没有显示任何数据，并且图例未定义。

这是我的代码：

    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: [{
                data: default_data,
                parsing: {
                    xAxisKey: 'unit_name',
                    yAxisKey: 'visitors'
                }
            }]
        },
        options: {
            
        }
    });

谁能看到这里的问题？我找不到任何错误，因为代码很简单，但它仍然什么也没显示。浏览器控制台中也没有消息。

【问题讨论】：

标签： javascript css chart.js

【解决方案1】：

查找最新的 Chart JS 好像旧版本不支持它。最新版本对我来说效果很好

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<body>

<canvas id="myChart" ></canvas>

<script>
    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('myChart').getContext('2d');

    var chart2 = new Chart(ctx, {
        type: 'bar',
        data: {
            datasets: [{
                data: default_data,
                backgroundColor:["red","green"],
                parsing: {
                    xAxisKey: 'unit_name',
                    yAxisKey: 'visitors'
                }
            }]
        },
        options: {
          plugins:{
            legend: {display: false}
          }
        }
    });
    
   
</script>

【讨论】：

是的，就是那个……太愚蠢了，我一直在努力解决这个 XD。
@AhSoHard Ohh，对于仍在显示的图例，请参阅更新。它是选项-> 插件-> 然后是图例。现在传说没有显示。干杯