搜索aldaflux/chartjs-bundle
Symfony5 中集成 Chartjs
Requires
- doctrine/collections: >=1.0
- symfony/framework-bundle: ^4.2|^5.0
This package is auto-updated.
Last update: 2024-09-14 18:47:33 UTC
README
从优秀的 https://github.com/Aldaflux-produccions/ChartjsBundle (Symfony2 / Symfony 3) 分支而来，现在兼容 Symfony 5
Symfony 5 Bundle，允许我们在项目中添加图表，使用 Chart.js 2.4.0 库。
如何使用它
安装
composer require aldaflux/chartjs-bundle dev-master
此命令要求您全局安装 Composer，如 Composer 文档的安装章节中所述。
然后，通过在您的项目中的 app/AppKernel.php 文件中添加以下行来启用该包
new Aldaflux\ChartjsBundle\ChartjsBundle(),
使用
使用以下配置配置 config/packages/aldaflux_chartjs.yaml
chartjs:
animation:
duration: 1000
easing: easeOutQuart
layout:
padding: 0
legend:
display: true
position: 'top'
fullWidth: true
reverse: false
labels:
boxWidth: 40
fontSize: 12
fontStyle: 'normal'
fontColor: '#666'
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
padding: 10
usePointStyle: false
title:
display: false
position: 'top'
fontSize: 12
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
fontColor: '#666'
fontStyle: 'bold'
padding: 10
text: ''
此配置是针对 Chartjs 的全局 配置。
在 app/config/routing.yml 中注册路由
# app/config/routing.yml Aldaflux_chartjs: resource: "@ChartjsBundle/Resources/config/routing.xml"
路由文件仅包含图表示例
https:///xxx/web/app_dev.php/testchart/mainTest
发布资产
$ php app/console assets:install web
将所需的样式表和 JavaScript 添加到您的布局中
在顶部添加 jQuery（jQuery 库不在资产中，您必须从 https://jqueryjs.cn/ 下载）
<script src="{{ asset('js/jquery.min.js') }}"></script>
Chart.js JavaScript
<script src="{{ asset('bundles/charjsbundle/js/Chart.min.js') }}"></script>
您可以选择仅添加 JavaScript 或使用扩展 twig，在您希望显示图表的模板中添加以下 twig
{{ chartjs_canvas('myPieChart',graphica.width,graphica.height,graphica) }}
第一个参数是 Canvas id，它是强制的并且必须是唯一的，Canvas 宽度，Canvas 高度和一个数组，graphicChart，具有特殊结构。
构建图表的数组结构（Aldaflux\ChartjsBundle\Model\ChartBuiderData）。示例
$graphicChart = new ChartBuiderData();
$graphicChart->setType(TypeCharjs::CHARJS_BAR);
$graphicChart->setLabels(array('Barcelona','New York','Londres','Paris','Berlin','Tokio','El Cairo'));
$graphicChart->setData(
array(
'Profit' => array(23,45,65,12,34,45,88),
'Cost' => array(13,34,54,11,34,35,48),
)
);
$graphicChart->setBackgroundcolor(
array(
TypeColors::aqua,
TypeColors::dark_green
)
);
$graphicChart->setBordercolor(
array(
TypeColors::aqua,
TypeColors::dark_green
)
);
$graphicChart->getHeight('150px');
$graphicChart->getWidth('500px');
$grafica->setOptions("
animation: {
duration: 0, // general animation time
},
hover: {
animationDuration: 0, // duration of animations when hovering an item
},
responsiveAnimationDuration: 0, // animation duration after a resize"
);
$grafica->setDatasetConfig('
pointStyle: \'star\',
');
控制器将是
public function barAction() {
$grafica = new ChartBuiderData();
$grafica->setType(TypeCharjs::CHARJS_BAR);
$grafica->setLabels(array('Barcelona','New York','Londres','Paris','Berlin','Tokio','El Cairo'));
$grafica->setData(
array(
'Profit' => array(23,45,65,12,34,45,88),
'Cost' => array(13,34,54,11,34,35,48),
));
$grafica->setBackgroundcolor(
array(
TypeColors::aqua,
TypeColors::dark_green
)
);
$grafica->setBordercolor(
array(
TypeColors::aqua,
TypeColors::dark_green
)
);
$grafica->setHeight('150px');
$grafica->setWidth('500px');
$grafica->setTitle('Sample Charjs Bar');
return $this->render('ChartjsBundle:test:testChart.html.twig',array('grafica'=>$grafica,'title'=>$grafica->getTitle()));
}
有几个与颜色和图表类型相关的帮助类
ChartsType：定义您可以渲染的图表
CHARJS_BAR = 'bar';
CHARJS_HORIZONTALBAR = 'horizontalBar';
CHARJS_RADAR = 'radar';
CHARJS_LINE = 'line';
CHARJS_PIE = 'pie';
CHARJS_DOUGHNUT = 'doughnut';
CHARJS_POLAR_AREA = 'polarArea';
TypeColors：定义颜色，超过 250 种
maroon = '128,0,0';
dark_red = '139,0,0';
brown = '165,42,42';
firebrick = '178,34,34';
crimson = '220,20,60';
red = '255,0,0';
tomato = '255,99,71';
coral = '255,127,80';
indian_red = '205,92,92';
light_coral = '240,128,128';
dark_salmon = '233,150,122';
salmon = '250,128,114';
light_salmon = '255,160,122';
orange_red = '255,69,0';
dark_orange = '255,140,0';
orange = '255,165,0';
gold = '255,215,0';
...
您可以通过手动操作或使用服务转换器 $grafica = $this->get('app.chartjs.transformer_char') 来构建此数组，此服务将数据库数据转换为 Array 数据，准备由 Chart.js 渲染
public function transform($type,$data,$fieldLabels,$fieldKpi,$options,$fieldData);
示例
$grafica = $this->get('app.chartjs.transformer_char')->transform(TypeCharjs::CHARJS_PIE,$data,'kpi','zone',$options,'average')->toArray();
此服务有多个参数
图表类型：$type => TypeCharjs::CHARJS_BAR（使用 Aldaflux\ChartjsBundle\Utils\TypeCharjs;）
数据库数据
$data=>
0 = {array} [4]
zone = "Europe"
kpi = "Number of NIUs"
average = "1250"
1 = {array} [4]
zone = "Asia"
kpi = "Number of NIUs"
average = "1225"
2 = {array} [4]
zone = "Africa"
kpi = "Number of NIUs"
average = "1235"
}
图表中的标签
$fieldLabels => 'zone'
指示器字段
$fieldKpi => 'kpi'
值字段
$fieldData => 'average'
Chartjs 选项
$options => graphic options
此转换将转换为以下数组结构
$result {array} [2]
labels = {array}[3]
[0] = Europe
[1] = Asia
[2] = Africa
data = {array}[1]
Number of NIUs = {array}[3]
[0] = 1250
[1] = 1225
[2] = 1235
Twig 示例
{% extends 'AppBundle:Default:index.html.twig' %}
{% block title %}Sample Chart{% endblock %}
{% block javascript-head %}
{{ parent() }}
<script src="{{ asset('js/jquery.min.js') }}"></script>
{% endblock %}
{% block contingut %}
<div class="container">
<div class="Absolute-Center centrar">
<div class="container">
<h2 style="margin-bottom:20px">Chart</h2>
<div class="chart">
<h3>{{ title }}</h3>
{{ chartjs_canvas('mychar1',grafica.width,grafica.height,grafica) }}
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascript %}
{{ parent() }}
<script src="{{ asset('bundles/charjts/js/Chart.min.js') }}"></script>
{% endblock %}