使用chart.js版本4.2.1创建雷达图时出错

mqxuamgl 于 2023-02-19 发布在 Chart.js

关注(0)|答案(1)|浏览(238)

Chart.js版本〉4时出现问题

使用以下脚本版本，雷达图可以https://cdn.jsdelivr.net/npm/chart.js工作
版本4.2.1在chart.js第7行中给出了雷达图表错误。https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.js">错误（意外标记“{".... --〉

我找不到Chartjs〉4.0的工作示例

``
`<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Radar Chart</title>
</head>
<body>
    <div>
        <canvas id="myChart"></canvas>
    </div>

<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> --> <!-- works -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.js"></script> <!--     doesn't work -->
<!-- error in chart.js line 7 (unespected token "{". ... -->

        <script>
            const ctx = document.getElementById('myChart');

            new Chart(ctx, {
                type: 'radar',
                data: {
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                        label: 'Whatever 1',
                        data: [12, 19, 23, 5, 32, 3],
                        borderWidth: 1
                    }, {
                        label: 'Whatever 2',
                        data: [12, 1, 22, 15, 2, 23],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

        </script>
    </body>
</html>``

chart.js

来源：https://stackoverflow.com/questions/75485773/error-when-creating-a-radar-chart-with-chart-js-version-4-2-1