我很难为chartjs geo包创建一个正常工作的例子：https://www.npmjs.com/package/chartjs-chart-geo/v/4.1.2
我使用Webpack与Laravel混合导入依赖项：

import Chart from 'chart.js/auto';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { topojson, ChoroplethController, ProjectionScale, ColorScale, GeoFeature } from 'chartjs-chart-geo';

Chart.register(ChartDataLabels, ChoroplethController, ProjectionScale, ColorScale, GeoFeature);
Chart.defaults.set('plugins.datalabels', {
    color: 'white',
    textStrokeWidth: 2,
    textStrokeColor: '#363636',
    // textShadowBlur: 1,
    // textShadowColor: '363636',

    font: {
        family: 'lato, sans-serif',
        size: 16,
        weight: 600
    }

});

window.Chart = Chart;
window.topojson = topojson;

这是包裹

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "laravel-mix": "^6.0.6"
    },
    "dependencies": {
        "chart.js": "^4.1.0",
        "chartjs-chart-geo": "^4.1.0",
        "chartjs-plugin-datalabels": "^2.1.0",
        "datamaps": "^0.5.9"
    }
}

下面是我尝试运行的代码：

<div  class="p-2 space-y-2 bg-white border-1 border-neutral-200 rounded-md shadow">
    <canvas class="container" id="testtesttest"></canvas>
</div>

<style>
    .container {
        height: 1200px;
        min-width: 310px;
        max-width: 800px;
        margin: 0 auto;
    }

    .loading {
        margin-top: 10em;
        text-align: center;
        color: gray;
    }
</style>
@push('scripts')
    <script>
        function test(){
            fetch('https://unpkg.com/us-atlas/states-10m.json').then((r) => r.json()).then((us) => {
                const nation = topojson.feature(us, us.objects.nation).features[0];
                let states = topojson.feature(us, us.objects.states).features;
                states = states.map((d) => ({feature: d, value: Math.random() * 10}));

                const chart = new Chart(document.getElementById("testtesttest").getContext("2d"), {
                    type: 'choropleth',
                    data: {
                        datasets: [{
                            data: states,
                        }]
                    }
                });
            });

        }

        test();

    </script>
@endpush

这将生成以下Map：

有人见过这个问题吗？我尝试过使用多个版本的chartjs和chartjs geo（尝试过4.1.2和3.9.0），但我似乎得到了相同的错误。我也尝试过渲染一个世界Map，它有完全相同的问题：