2023年6月15日 21:22:33go评论62阅读模式

英文:

Symfony UX Chart.js just display a blank square

问题

我已经按照官方教程在Symfony中创建了我的图表：https://symfony.com/bundles/ux-chartjs/current/index.html

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

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

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

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

我运行了npm run watch：

watch> encore dev --watch
正在运行webpack ...
已成功编译，耗时3085毫秒
5个文件写入到public/build
入口点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字节 app.js 23.2 KiB
webpack成功编译

我的控制器代码基本与教程中的代码相同：

$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]);

这是我的Twig模板的内容：

{% 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="{"type":"line","data":{"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]}]},"options":{"scales":{"y":{"suggestedMin":0,"suggestedMax":100}}}}"></canvas>

但它什么都没有显示。

我在我的Twig中添加了，但情况还是一样。

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

有什么建议吗？我有点迷失方向。

谢谢！

英文:

I have followed the official tutorial to get my chart on symfony : https://symfony.com/bundles/ux-chartjs/current/index.html

But the chart does not display, it is just blank. I head that it may be caused by an old version of Encore or Symfony UX Chart.js but they are all up to date :

Encore is up to date : Using version ^2.0 for symfony/webpack-encore-bundle

UX Chart.js is up to date :Using version ^2.9 for symfony/ux-chartjs

Stimulus is up to date :Using version ^2.9 for symfony/stimulus-bundle

I Ran npm run watch :

&gt; watch&gt; encore dev --watch
Running webpack ...
&#160;DONE&#160; Compiled successfully in 3085ms &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; 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

The code of my control is basically the same that the code on the tutorial :

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

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

        $chart-&gt;setOptions([
            &#39;scales&#39; =&gt; [
                &#39;y&#39; =&gt; [
                    &#39;suggestedMin&#39; =&gt; 0,
                    &#39;suggestedMax&#39; =&gt; 100,
                ],
            ],
        ]);

        return $this-&gt;render(&#39;graph.html.twig&#39;, [&#39;chart&#39; =&gt; $chart]);

And here is the content of my twig :

{% extends &#39;armature.html.twig&#39; %}

{% block contenu %}

&lt;!-- Page Heading --&gt;
&lt;h1 class=&quot;h3 mb-4 text-gray-800&quot;&gt;Graphiques&lt;/h1&gt;

A
&lt;div&gt;
{{ render_chart(chart) }}
&lt;/div&gt;
B

Here is the HTML generated :

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

But it just display nothing.

I added <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> on my twig but it is the same.

I don't see any errors or warning in the Chrome console.

Any ideas? I'm a bit lost.

Thanks

答案1

得分: 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

英文:

This happens when the page does not include scripts that will process the canvas. Try this code for graph.html.twig:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    {% block stylesheets %}
        {{ encore_entry_link_tags(&#39;app&#39;) }}
    {% endblock %}

    {% block javascripts %}
        {{ encore_entry_script_tags(&#39;app&#39;) }}
    {% endblock %}
&lt;/head&gt;
&lt;body&gt;
{{ render_chart(chart) }}
&lt;/body&gt;
&lt;/html&gt;

If that doesn't work, you can try remove the packages and require them again, making sure that you don't get errors when applying their recipes. Something like this:

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

答案2

得分: 0

我遇到了同样的问题。

安装 Stimulus：composer require symfony/stimulus-bundle
在 webpack.config.js 中启用 Stimulus

// 启用 Symfony UX Stimulus 桥接（在 assets/bootstrap.js 中使用）
.enableStimulusBridge('./assets/controllers.json')

在 assets/app.js 中导入 Stimulus

// 启动 Stimulus 应用程序
import './bootstrap';

在 assets/bootstrap.js 中导入 Stimulus

import { startStimulusApp } from '@symfony/stimulus-bridge';

// 从 controllers.json 和 controllers/ 目录注册 Stimulus 控制器
export const app = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
    true,
    /\.[jt]sx?$/
));

运行 npm run watch

如果有问题，请告诉我。

英文:

I Had the same problem.

Install Stimulus : composer require symfony/stimulus-bundle
Enable Stimulus in webpack.config.js

// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
.enableStimulusBridge(&#39;./assets/controllers.json&#39;)

Import Stimulus in assets/app.js

// start the Stimulus application
import &#39;./bootstrap&#39;;

Import Stimulus in assets/bootstrap.js

import { startStimulusApp } from &#39;@symfony/stimulus-bridge&#39;;

// Registers Stimulus controllers from controllers.json and in the controllers/ directory
export const app = startStimulusApp(require.context(
    &#39;@symfony/stimulus-bridge/lazy-controller-loader!./controllers&#39;,
    true,
    /\.[jt]sx?$/
));

npm run watch

Let me know if it works.

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

Symfony UX Chart.js只显示一个空白的正方形。

问题

答案1

答案2

Chart.js – 如何创建分组堆叠柱状图

Symfony 6调试工具栏未显示

覆盖 Sylius 中的结帐流程

PhpStorm配置PHPStan与Docker一起用于Symfony

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论