并正确地做
También 不负责任的西班牙文。
为了在Drupal 7中做到这一点，我们使用库模块。 对于Drupal 8，这始终是正确的方法。 但是，此模块正处于巨大的变更过程中，并且没有完整记录，这就是为什么第一次进行此操作确实是一个挑战。
对于本文，我们将在自定义块中使用Chart.js库。 我们需要做的第一件事是下载和安装库模块。 完成之后，根据文档，我们需要检查是否要在库注册表中使用要定义的库； 如果它存在并且对我们有用，那么我们就节省了一步。 如果不存在（这就是我的情况），我们需要创建它（然后将其贡献给社区）。 为此，我们必须在文件夹public：// library-definitions中使用库定义创建一个json文件。 对于我们来说，该文件将被命名为chart.js并将具有以下内容：
{
“ name”：“ Chart.js”，
“ type”：“资产”，
“ vendor url”：“ http：\ / \ / www.chartjs.org”，
“下载网址”：“ https：\ / \ / github.com \ / chartjs \ /Chart.js \ / releases \ / latest”，
“变体”：{
“缩小”：{
“ js”：{
“ Chart.min.js”：“ Chart.min.js”
}
}
}，
“ js”：{
“ Chart.js”：“ Chart.js”
}，
“ version_detector”：{
“ id”：“ line_pattern”，
“配置”：{
“ file”：“ Chart.js”，
“ pattern”：“ \ /版本：（[0-9a-zA-Z \\ .-] +）\ /”
}
}
}
在此文件中，我们编写了库的人名，库类型（资产）和其他一些库信息。
测试完成后，请记住通过问题队列贡献文件，以便其他人可以从中受益。
下一步是下载库，并将其放置在正确的文件夹中。 对于我们的案例，它位于sites/all/assets/vendor/chart_js中。 在那里，我们应该放置Chart.js和Chart.min.js
当然，为了使用该库，我们需要一个自定义的js文件。 因此，我们在js文件夹（仅供订购）中创建一个我们想要的名称。 在本文中，我们将遵循Chart.js基本示例； 因此，我们的文件将命名为demo_chartjs.js并具有以下内容：
（函数（$，Drupal）{
Drupal.behaviors.demoChartJsDemoChart = {
附加：功能（上下文，设置）{
var ctx = document.getElementById（“ myChart”）;
var myChart = new Chart（ctx，{
类型：“酒吧”，
数据：{
标签：[“红色”，“蓝色”，“黄色”，“绿色”，“紫色”，“橙色”]，
数据集：[{
标签：“投票数”，
数据：[12、19、3、5、2、3]，
背景颜色： [
'rgba（255，99，132，0.2）'，
'rgba（54，162，235，0.2）'，
'rgba（255，206，86，0.2）'，
'rgba（75，192，192，0.2）'，
'rgba（153，102，255，0.2）'，
'rgba（255，159，64，0.2）'
]，
边框颜色： [
'rgba（255,99,132,1）'，
'rgba（54，162，235，1）'，
'rgba（255，206，86，1）'，
'rgba（75，192，192，1）'，
'rgba（153，102，255，1）'，
'rgba（255，159，64，1）'
]，
borderWidth：1
}]
}，
选项：{
秤：{
y轴：[{
滴答声：{
beginAtZero：true
}
}]
}
}
}）;
}
};
}）（jQuery，Drupal）;
与Drupal 7相比，Drupal 8中javascript的工作方式没有什么不同。如果需要，可以查看文档。
对于Drupal 8，可以附加到任何渲染数组的唯一内容是库，因此我们需要定义一个库。 为此，根据官方文档，我们需要创建一个.libraries.yml文件。 由于我们的模块名为demo_chartjs，因此此文件将命名为demo_chartjs.libraries.yml并具有以下内容：
demo_chartjs：
版本：1.x
js：
js / demo_chartjs.js：{}
接下来，我们需要创建一个模板来为图表呈现必要的标记。 因此，我们将在.module文件中实现hook_theme ：
/ **
*实现hook_theme（）。
* /
函数demo_chartjs_theme（）{
返回[
'demo_chartjs_demo_chart'=> [
'变量'=> []，
]，
];
}
并将我们的模板文件添加到模块内的模板文件夹中。 该文件将被命名为demo-chartjs-demo-chart.html.twig并具有以下内容：
{＃
/ **
* @文件
* demo_chartjs_demo_chart的模板文件。
* /
＃}
现在，唯一尚待完成的就是创建我们的代码块。 因此，让我们在src/Plugin/Block创建一个文件DemoChartJs.php并将此内容放在此处：
<？php
命名空间Drupal \ demo_chartjs \ Plugin \ Block;
使用Drupal \ Core \ Block \ BlockBase;
使用Drupal \ Component \ Utility \ Xss;
/ **
*提供一个'DemoChartJs'块。
*
* @块（
* id =“ demo_chart_js”，
* admin_label = @Translation（“演示图表js”），
*）
* /
类DemoChartJs扩展了BlockBase {
/ **
* {@inheritdoc}
* /
公共功能build（）{
$ build = [];
$ build ['chart'] = [
'#theme'=>'demo_chartjs_demo_chart'，
'#attached'=> [
'图书馆'=> [
'libraries / chart_js'，
'demo_chartjs / demo_chartjs'，
]，
]，
];
返回$ build;
}
}
该文件最重要的部分是构建功能。 在那里，我们指示Drupal使用先前定义为模板渲染的主题demo_chartjs_demo_chart 。 我们还将附加两个库：
- library / chart_js：Chart.ks库。 由于这是一个外部库； 它们始终被注册为库模块的一部分。
- demo_chartjs / demo_chartjs：.libraries.yml文件中定义的我们的库。 这仅包括我们的js文件。
完成所有先前的工作； 现在该测试我们的模块了。 继续并将其放置在站点中，您应该有一个漂亮的图表，如该帖子的标题图像所示。
免责声明：库模块处于持续开发中，因此某些事情可能会发生变化； 但是，我认为此处显示的一般概念将保持不变。
希望对您有用。
