我已经按照官方教程在symfony上获得了我的图表:www.example.com 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是最新的:使用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="{"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>
但它只是显示什么。
我在我的树枝上加了一条,但它是一样的。
我在Chrome控制台中没有看到任何错误或警告。
有什么想法吗?我有点迷路了。
谢谢
1条答案
按热度按时间x9ybnkn61#
当页面不包含将处理画布的脚本时,会发生这种情况。尝试使用graph.html.twig的代码:
如果这不起作用,您可以尝试删除这些包并再次要求它们,确保在应用它们的配方时不会出错。就像这样: