Symfony UX Chart.js 仅显示一个空白方块

问题描述 投票：0回答：2

我已按照官方教程在 symfony 上获取图表：https://symfony.com/bundles/ux-chartjs/current/index.html

但是图表不显示，只是空白。我认为这可能是由旧版本的 Encore 或 Symfony UX Chart.js 引起的，但它们都是最新的：

Encore 是最新的：对 symfony/webpack-encore-bundle 使用版本 ^2.0

UX Chart.js 是最新的：对 symfony/ux-chartjs 使用版本 ^2.9

Stimulus 是最新的：对 symfony/stimulus-bundle 使用版本 ^2.9

我运行了 npm run watch :

> watch> encore dev --watch
Running webpack ...
 DONE  Compiled successfully in 3085ms                                                                                                               7:43:59 PM
5 files written to public/buildEntrypoint app [big] 1.75 MiB = runtime.js 14.6 KiB vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_symfony_ux-chartjs_di-bb5774.js 1.71 MiB app.css 741 bytes app.js 23.2 KiBwebpack compiled successfully

我的控件的代码与教程上的代码基本相同：

$chart = $chartBuilder->createChart(Chart::TYPE_LINE);

        $chart->setData([
            'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            'datasets' => [
                [
                    'label' => 'My First dataset',
                    'backgroundColor' => 'rgb(255, 99, 132)',
                    'borderColor' => 'rgb(255, 99, 132)',
                    'data' => [0, 10, 5, 2, 20, 30, 45],
                ],
            ],
        ]);

        $chart->setOptions([
            'scales' => [
                'y' => [
                    'suggestedMin' => 0,
                    'suggestedMax' => 100,
                ],
            ],
        ]);

        return $this->render('graph.html.twig', ['chart' => $chart]);

这是我的树枝的内容：

{% extends 'armature.html.twig' %}

{% block contenu %}

<!-- Page Heading -->
<h1 class="h3 mb-4 text-gray-800">Graphiques</h1>

A
<div>
{{ render_chart(chart) }}
</div>
B

这是生成的 HTML :

<canvas data-controller="symfony--ux-chartjs--chart" data-symfony--ux-chartjs--chart-view-value="{&quot;type&quot;:&quot;line&quot;,&quot;data&quot;:{&quot;labels&quot;:[&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;],&quot;datasets&quot;:[{&quot;label&quot;:&quot;My First dataset&quot;,&quot;backgroundColor&quot;:&quot;rgb(255, 99, 132)&quot;,&quot;borderColor&quot;:&quot;rgb(255, 99, 132)&quot;,&quot;data&quot;:[0,10,5,2,20,30,45]}]},&quot;options&quot;:{&quot;scales&quot;:{&quot;y&quot;:{&quot;suggestedMin&quot;:0,&quot;suggestedMax&quot;:100}}}}"></canvas>

但它什么也没显示。

我添加了我的树枝，但它是一样的。

我在 Chrome 控制台中没有看到任何错误或警告。

有什么想法吗？我有点失落了。

谢谢

symfony chart.js symfonyux
2个回答
1
投票

当页面不包含处理画布的脚本时，就会发生这种情况。尝试一下 graph.html.twig 的代码：

<!DOCTYPE html>
<html>
<head>
    {% block stylesheets %}
        {{ encore_entry_link_tags('app') }}
    {% endblock %}

    {% block javascripts %}
        {{ encore_entry_script_tags('app') }}
    {% endblock %}
</head>
<body>
{{ render_chart(chart) }}
</body>
</html>

如果这不起作用，您可以尝试删除这些软件包并再次需要它们，以确保在应用其配方时不会出现错误。像这样的东西：

composer require symfony/ux-chartjs
composer require symfony/webpack-encore-bundle
yarn install
yarn encore dev
0
投票

我现在有完全相同的问题，按照教程，html 确实收到了一些东西，但 javascript 不处理它

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.