不明白为什么图表js不会加载答案

【问题标题】：Not understanding why chart js wont load不明白为什么图表js不会加载
【发布时间】：2022-08-23 23:05:29
【问题描述】：

图表 JS 3.9.1
Laravel 9.x

有 50,000 个问题使用 20 个不同的版本，但我发现没有一个是有帮助的。我检查了版本，检查了文档，甚至检查了页面源以查看数据是否到位。没有错误，没有图表，什么都没有。

在我完成的刀片文件中：

<div>
    <canvas id=\"item-listing-data\" width=\"400\" height=\"400\"></canvas>
</div>

@push(\'scripts\')
    <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>
    <script>

        const ctx    = document.getElementById(\'item-listing-data\').getContext(\'2d\');

        const saleDataChart = new Chart(ctx, {
            type: \'line\',
            labels: @json($saleData[\'labels\']),
            datasets: [{
                label: \'Sale Data\',
                data: @json($saleData[\'data\']),
                fill: false,
                borderColor: \'rgb(34, 67, 156)\',
                tension: 0.1
            }]
        });
    </script>
@endpush

据我所知，从docs 这就是你所做的。这就是您呈现图表的方式。

如果我检查页面以查看吐出的 JS：

const ctx    = document.getElementById(\'item-listing-data\');

const saleDataChart = new Chart(ctx, {
    type: \'line\',
    labels: [\"Mon Aug 2022 14:08:13\"],
    datasets: [{
        label: \'Sale Data\',
        data: [10000],
        fill: false,
        borderColor: \'rgb(34, 67, 156)\',
        tension: 0.1
    }]
});

在我看来是对的。

当我调查页面时，我看到一个太大的 div，即画布元素 - 但我确信可以使用选项来修复，而没有图表。只是一个空的画布。

同样，我知道这个问题已经被问了一千次了，但我：

关注文档
检查了我的代码中的问题
确保我加载了正确版本的图表 js

仍然没有图表，没有错误，什么都没有。

即使我用[1,2,3] 替换labels 和data - 没有，没有图表，没有错误。

想法？

不知道它是否是一个错字，但在您的 JS 输出中缺少 .getContext(\'2d\') 调用。
将 const ctx 和 const salesdatachart 包装在准备好的文档中。
@David我确实有，但我有同样的问题，所以发布的例子没有它。文档似乎说它可以有或没有。
@Cameron A document.addEventListener(\"DOMContentLoaded\", function() { .. }) 没有解决问题，stackoverflow.com/a/21814964/1270259

标签： javascript laravel chart.js laravel-blade

【解决方案1】：

AFA 我可以看到，问题似乎出在图表配置中，并且缺少 data 节点。没有它，图表就没有数据可以显示。

代码应该是：

<div>
    <canvas id="item-listing-data" width="400" height="400"></canvas>
</div>

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>

        const ctx    = document.getElementById('item-listing-data').getContext('2d');

        const saleDataChart = new Chart(ctx, {
            type: 'line',
            data: { // <--- this was missing
              labels: @json($saleData['labels']),
              datasets: [{
                  label: 'Sale Data',
                  data: @json($saleData['data']),
                  fill: false,
                  borderColor: 'rgb(34, 67, 156)',
                  tension: 0.1
              }]
            }
          });
    </script>
@endpush

【讨论】：