heimrichhannot/contao-google-charts-bundle

一个用于使用 Google Charts API 可视化数据的包

0.4.1 2023-06-05 13:45 UTC

This package is auto-updated.

Last update: 2024-09-05 16:36:00 UTC


README

使用此包,您可以使用 Google Charts API 可视化数据

描述

此包使用 cmen/google-charts-bundle 来显示图表。您可以使用此包在单独的页面显示图表,或者作为 heimrichhannot/contao-reader-bundle 的配置元素。

特性

  • 使用 Google Charts API 显示数据
  • 可选:向 heimrichhannot/contao-reader-bundle 添加一个读取器配置元素
  • 可选:添加一个 Google 地图读取器配置元素配置,用于显示高度图表

文档

设置图表配置

首先,您需要创建一个图表配置。在这里定义您想使用的图表类型,并自定义图表的属性。您还需要选择一个数据类型。目前有 jsonreference 可选。如果您选择 reference 作为数据类型,则需要设置数据容器和数据字段,这些字段包含引用数据。您还可以设置一个特定的实体来获取数据。这是可选的。如果您没有设置实体,则当您将图表用作读取器配置元素时,它会自动设置。否则,您可以通过事件监听器来设置它。如果实体从未设置,您将收到一个错误。

创建完图表配置后,有几种方法可以显示图表。

通过模块显示图表

显示图表的最简单方法是创建一个使用图表配置来在前端显示图表的模块。

通过读取器配置元素显示图表

您可以在 heimrichhannot/contao-reader-bundle 中使用图表作为读取器配置元素。如果您在图表配置中将数据类型设置为 reference,则实体将自动由当前项 ID 设置。

数据类型

当数据添加到图表时,它必须是数组类型。

JSON

请输入包含 x-/y-值对的合法 JSON。请在此 JSON 中不要输入坐标轴的标签,而是使用输入字段 labelX 和 labelY。

[
    ['value-x', 'value-y'],
    ['value-x', 'value-y'],
    ['value-x', 'value-y']
    ...
]

引用

要使用由特定实体提供的数据,您可以使用引用数据类型。在图表配置中设置数据容器和数据字段,这些字段包含数据。可选地,您可以设置要从其中检索数据的特定实体。如果您使用图表配置作为读取器配置元素,则在生成配置元素时将自动设置实体。

如何修改图表数据

重要:当您想向图表添加数据时,请记住,这些数据必须是数组。您可以通过两种不同的方式修改数据。

数据类型

您可以添加一个自定义数据类型,该类型将在图表配置中可选。在这里,通过 setData 方法配置并添加数据到数据类型。例如,对于数据类型 reference,数据将从引用的实体中提取,这些实体是通过您在图表配置中设置的值(数据容器、数据字段、数据实体)选择的。

数据类型作为服务添加。在您的service.yml中添加'_instanceof'部分,并像以下示例中那样添加您的数据类型类。

services:
  _instanceof:
      HeimrichHannot\GoogleChartsBundle\DataType\DataTypeInterface:
        tags: ['huh.google_charts.data_type']

# DataTypes
  
  HeimrichHannot\GoogleChartsBundle\DataType\Concrete\DataTypeJson: ~
  HeimrichHannot\GoogleChartsBundle\DataType\Concrete\DataTypeReference: ~

GoogleChartsModifyChartDataEvent

无论您选择哪种数据类型,您都可以通过此事件修改图表数据。事件包含图表配置和由数据类型设置的数据作为参数。要修改数据,您需要使用setData方法在事件中设置数据。