chart 图表
基本用法
在视图的 XML 中声明 charts 命名空间：
<view xmlns="http://jmix.io/schema/flowui/view"
xmlns:charts="http://jmix.io/schema/charts/ui"/>|
当使用顶部操作面板中的 Add Component 操作添加组件时，Studio 会自动添加该命名空间。请参见 组件面板。 |
然后使用 XML 元素和属性声明并配置图表：
<charts:chart id="chart">
<charts:dataSet>
<charts:source dataContainer="vehiclesDc"
categoryField="year"
valueFields="cars motorcycles bicycles"/>
</charts:dataSet>
<charts:series>
<charts:bar name="Cars"/>
<charts:bar name="Motorcycles" stack="stack"/>
<charts:bar name="Bicycles" stack="stack"/>
</charts:series>
<charts:xAxes>
<charts:xAxis/>
</charts:xAxes>
<charts:yAxes>
<charts:yAxis>
<charts:axisLabel formatter="{value}"/>
</charts:yAxis>
</charts:yAxes>
</charts:chart>之后，在 Java 中以编程方式设置其他属性：
@ViewComponent
private Chart chart;
@Subscribe
public void onInit(final InitEvent event) {
chart.setLegend(new Legend().withTop("0"));
chart.setTitle(new Title().withText("Vehicles").withSubtext("By Year"));
}生成的图表如下所示：
|
配置图表时，可以参考 Apache ECharts 官方文档 找到所需的属性，然后使用对应的 Jmix Chart 属性。大多数情况下，JavaScript 和 Jmix API 之间存在完全匹配的对应关系。 |
响应式尺寸
chart 组件由 Apache ECharts 渲染，在渲染或重新渲染时需要可计算的非零尺寸。当图表放置在响应式布局、隐藏容器或尺寸动态变化的容器中时（例如应用菜单折叠或展开时），需要注意这个特性。
如果将多个图表并排放置，请避免仅依赖父容器的 width="100%"。图表在可用区域增大时可以延展尺寸，但当周围容器变窄时可能无法正确收缩。在这种情况下，请使用 flex 布局并对图表容器使用 flex-grow：
<hbox width="100%">
<vbox classNames="flex-grow">
<charts:chart id="barChart" width="100%" minHeight="30em">
<!-- chart configuration -->
</charts:chart>
</vbox>
<vbox classNames="flex-grow">
<charts:chart id="pieChart" width="100%" minHeight="30em">
<!-- chart configuration -->
</charts:chart>
</vbox>
</hbox>同时确保图表或其父容器具有显式的 height 或 minHeight。如果图表放置在 height="100%" 的容器中，但没有任何父容器具有可计算的高度，图表可能会以零高度渲染。
因此，对于最初使用 visible="false" 隐藏、之后以编程方式显示的图表需要特别注意。
数据集
dataSet 属性定义图表 系列（series） 的数据源，并支持在一个 charts 标签内的多个 series 之间复用数据。
以下示例中，在 XML 中配置数据集，并将图表与 vehiclesDc 数据容器关联：
<charts:dataSet>
<charts:source dataContainer="vehiclesDc"
categoryField="year"
valueFields="cars motorcycles bicycles"/>
</charts:dataSet>图表使用实体的 year 属性获取类别名称，并使用 cars、motorcycles 和 bicycles 属性获取值。
相同的数据集可以在 Java 中按如下方式配置：
chart.setDataSet(
new DataSet().withSource(
new DataSet.Source<EntityDataItem>()
.withDataProvider(new ContainerChartItems<>(vehiclesDc))
.withCategoryField("year")
.withValueFields("cars", "motorcycles", "bicycles")
)
);
chart 元素只能包含一个 dataSet 配置。
|
系列
series 元素定义需要显示的图表类型（例如折线图、柱状图、散点图）。每种图表类型可以在 series 元素中以不同方式配置。
Jmix 支持的基本图表类型包括：
在以下示例中，series 元素定义饼图：
<charts:chart>
<charts:dataSet>
<charts:source dataContainer="vehiclesIn2012Dc"
categoryField="name"
valueFields="value"/>
</charts:dataSet>
<charts:series>
<charts:pie>
<charts:label formatter="{b}: {d}%"/>
</charts:pie>
</charts:series>
</charts:chart>label 元素配置饼图扇区的文本标签。formatter 属性定义一个 pattern，其中可使用数据项名称和值的代码。有关 label 和 formatter 的更多信息，请参见 ECharts 文档。
生成的饼图如下所示：
chart 元素可以包含多个 series 配置，此时数据将在所有图表类型之间共享。
|
标题
title 属性用于显示图表的主标题和副标题，可自定义文本内容、定位、对齐方式和样式。
示例：
<charts:chart>
<charts:title text="Vehicles" subtext="Ratio in 2012"
top="0" right="0" textAlign="CENTER">
<charts:textStyle fontStyle="ITALIC"/>
</charts:title>此配置为图表指定了主标题和副标题，位于右上角，文本居中对齐并使用斜体样式：
图例
legend 属性显示不同系列的符号、颜色和名称。可以点击图例来切换图表系列的显示。图例根据提供的数据自动生成。
<charts:chart>
<charts:legend align="RIGHT"/>此示例显示带有符号的图例：
数据缩放
dataZoom 属性提供两个主要功能：
-
内置数据缩放 支持用户通过鼠标拖动、鼠标滚轮移动或触摸屏上的手指触摸手势在坐标系内缩放或漫游。
-
滑块型数据缩放 提供数据缩略图以便快速概览、放大/缩小、选择刷选、拖动移动以及点击定位到图表数据范围内的功能。
示例：
<charts:chart>
<charts:dataZoom>
<charts:insideDataZoom/>
<charts:sliderDataZoom orientation="HORIZONTAL"/>
<charts:sliderDataZoom orientation="VERTICAL" right="5%"/>
</charts:dataZoom>注意图表上显示的水平和垂直滑块：
原生 JSON
当组件的 Java API 或 XML 属性无法满足特定自定义需求时，通过 nativeJson 属性可以使用原生 JSON 字符串作为替代方式来配置图表。此功能提供了对 ECharts 全部配置选项的支持。
示例：
<charts:chart>
<charts:nativeJson>
<![CDATA[{
"title": {
"text": "Vehicles",
"subtext": "Ratio in 2012",
"top": "0",
"right": "0",
"textAlign": "CENTER",
"textStyle": {
"fontStyle": "italic"
}
}
}]]>
</charts:nativeJson>此处 nativeJson 元素以与 上文 XML 配置相同的方式配置图表标题。
nativeJson 配置会与现有属性合并，并覆盖 XML 中定义的相应属性。
|
XML 属性
下面是 chart 的特殊属性：
| 名称 | 描述 | 默认值 |
|---|---|---|
启用或禁用图表动画。 |
|
|
设置初始动画前的延迟，单位为毫秒。 |
— |
|
设置更新动画前的延迟，单位为毫秒。 |
— |
|
设置初始动画的持续时间，单位为毫秒。 |
— |
|
设置更新动画的持续时间，单位为毫秒。 |
— |
|
设置初始动画的缓动效果。 |
— |
|
设置更新动画的缓动效果。 |
— |
|
是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。 |
— |
|
以 CSS 颜色设置图表背景色。 |
— |
|
设置全局混合模式。可能的值为 |
|
|
设置图表系列使用的逗号分隔的 CSS 颜色调色板。 |
— |
|
设置元素数量阈值，超过该阈值时悬停元素在单独的层上渲染。 |
— |
|
选择客户端渲染器。支持 |
|
|
设置 ECharts 是否应以 UTC 解析和显示时间值。 |
— |
下面是 chart 支持的其他通用属性：
事件和处理器
下面是 chart 的特殊事件和处理器：
|
在 Jmix Studio 生成处理器桩代码时，可以使用 Jmix UI 组件面板的 Handlers 标签页或者视图类顶部面板的 Generate Handler 添加，也可以通过 Code → Generate 菜单（Alt+Insert / Cmd+N）生成。 |
| 名称 | 描述 |
|---|---|
当用户点击图表元素时触发。 |
|
当数据缩放操作更改可见数据范围时触发。 |
|
当用户双击图表元素时触发。 |
|
当渲染和所有动画完成时触发。 |
|
当工具箱交互接管全局光标时触发。 |
|
当指针离开图表区域时触发。 |
|
当图例反选时触发。 |
|
当可滚动图例更改页面时触发。 |
|
当所有图例项被选中时触发。 |
|
当图例项更改其选中状态时触发。 |
|
当工具箱更改图表系列类型时触发。 |
|
当指针按钮在图表上按下时触发。 |
|
当指针在图表上移动时触发。 |
|
当指针离开图表元素时触发。 |
|
当指针进入图表元素时触发。 |
|
当指针按钮在图表上释放时触发。 |
|
在图表渲染或重新渲染后触发。 |
|
当工具箱恢复操作重置图表配置时触发。 |
下面是 chart 支持的其他通用事件：
XML 内部元素
chart 可以包含 title、legend、scrollableLegend、tooltip、toolbox、brush、grid、aria、xAxes、yAxes、polar、radiusAxis、angleAxis、radar、dataZoom、visualMap、axisPointer、dataSet、series、textStyle、stateAnimation 和 nativeJson 作为内部元素。这些元素对应于 Apache ECharts 配置模型的选项。