条形图

本章节内,我们将了解:

  • 集成带多个 series 的图表

  • 添加 titletooltiplegend 元素

  • 通过数据容器绑定数据

多序列图表配置

这里我们集成一个图表组件,该组件结合了 bar series 表示员工的工资,以及一个 line 系列来显示他们的总评分。

设置图表 Series

Jmix 工具窗口内双击 user-list-view.xml。首先,点击放置图表的 formLayout 元素。

选择操作面板的 Add Component → Chart 添加一个 chart 元素。

adding charts

这个操作会自动在 XML 的根节点添加图表的 namespace:

<view xmlns="http://jmix.io/schema/flowui/view"
    xmlns:charts="http://jmix.io/schema/charts/ui" />

以及在 formLayout 内自动添加 <charts:chart/> 元素。请按照下面的代码配置 idheightwidth 属性。

<charts:chart id="bar" width="40em" height="100%" minHeight="30em" alignSelf="STRETCH">

需要通过 series 添加具体的图表。 在 Jmix UI 结构面板或视图的 XML 中选择 chart 元素,然后在元素的属性面板中点击 Add 按钮。从下拉列表中选择 Series → Bar

添加 line series 时,则可以先选中 series 元素,然后点击 Add → Line。为两个图表类型分别设置 name 属性:Salary 和 `AssesmentTotal:

<charts:series>
    <charts:bar name="Salary"/>
    <charts:line name="Assessment Total"/>
</charts:series>

添加坐标轴

barscatterline 图表需要通过 yAxesxAxes 元素显示图表中的值。 添加 X 轴时,点击图表元素,并选择 Add → XAxes → XAxis。这里我们图表的 X 轴用于显示员工的名称。

<charts:xAxes>
    <charts:xAxis/>
</charts:xAxes>

由于图表有两种不同的数据类型,且数据的比例也不一样,因此需要分别配置两个 Y 轴。 配置第一个 Y 轴显示员工的工资,点击 chart 元素并选择 Add → XAxes → XAxis

XAxis 元素添加 name="Salary" 属性并配置其位置和对齐方式。

数据库中存储的值为 100,000 的倍数。若要将这些数值以几千的格式显示,需要在 YAxis 下添加 axisLabel 元素,并按如下方式设置 formatterFunction 属性。

<charts:yAxis name="Salary" position="LEFT" alignTicks="true">
    <charts:axisLabel
            formatterFunction="function(value){return value / 100;}"/>
</charts:yAxis>

formatterFunction 属性定义了一个 JavaScript 函数,用来调整数轴上刻度值的格式。 在上面的示例中,该函数将传入的 value 除以 100,将十万级别的数值调整为几千级别。

添加第二个 Y 轴时,选择 YAxes 元素并选择 Add → XAxis。然后可以配置轴的名称、位置和刻度对齐方式,如下所示。

<charts:yAxis name="Assessment Total" position="RIGHT" alignTicks="true"/>

接下来,分别在 barline 系列中添加 yAxisIndex 属性,将 Y 轴与其各自的图表进行映射,如下所示。

<charts:series>
    <charts:bar name="Salary" yAxisIndex="0"/>
    <charts:line name="Assessment Total" yAxisIndex="1"/>
</charts:series>

添加图表属性

现在,我们将向图表添加一些可选属性,例如 titletooltiplegend,以提供更丰富的内容。

标题

默认情况下,title 文本显示在图表顶部。如需添加标题,选择 chart 元素,然后从属性面板中选择 Add → Title。配置 text 属性描述图表所展示的内容,这里我们设置为 Salary & Assessment Total

<charts:title text="Salary &amp; Assessment Total"/>

提示框

当用户将鼠标悬停在图表的不同部分时,tooltip 属性可以为用户提供详细信息。如需添加 tooltip 属性,选择 chart 元素,然后从属性面板中选择 Add → Tooltip。将 trigger 属性设置为"AXIS",显示同一类别中所有信息的提示。

<charts:tooltip trigger="AXIS">
    <charts:axisPointer type="SHADOW"/>
</charts:tooltip>

图例

legend 属性可帮助用户区分图表上不同的数据类型,是根据图表数据自动配置的。如需添加 legend 属性,选择 chart 元素,然后从属性面板中选择 Add → Legend

<charts:legend/>

绑定数据容器

首先,需要加载除了 Admin 之外的所有用户。

data 元素中创建一个新的 collectionContainer,命名为 employeesDc,配置其 JPQL query 如下:

<collection id="employeesDc"
            class="com.company.onboarding.entity.User">
    <fetchPlan extends="_base">
        <property name="department" fetchPlan="_base"/>
    </fetchPlan>
    <loader id="employeesDl" readOnly="true">
        <query>
            <![CDATA[select e from User e where e.username <> 'admin']]>
        </query>
    </loader>
</collection>

为图表配置数据时,选择 chart 元素,并手动添加一个 dataSet 属性。

<charts:dataSet/>

dataSet 元素中,选择 employeesDc 作为 source,并配置 categoryField 作为 X 轴,valueFields 作为 Y 轴:

<charts:dataSet>
    <charts:source dataContainer="employeesDc"
                   categoryField="username" valueFields="salary assessmentTotal"/>
</charts:dataSet>

到这里,条形图的 XML 配置如下:

<charts:chart id="bar" width="40em" height="100%" minHeight="30em" alignSelf="STRETCH">
    <charts:title text="Salary &amp; Assessment Total"/>
    <charts:tooltip trigger="AXIS">
        <charts:axisPointer type="SHADOW"/>
    </charts:tooltip>
    <charts:legend/>

    <charts:dataSet>
        <charts:source dataContainer="employeesDc"
                       categoryField="username" valueFields="salary assessmentTotal"/>
    </charts:dataSet>

    <charts:xAxes>
        <charts:xAxis/>
    </charts:xAxes>
    <charts:yAxes>
        <charts:yAxis name="Salary" position="LEFT" alignTicks="true">
            <charts:axisLabel
                    formatterFunction="function(value){return value / 100;}"/>
        </charts:yAxis>
        <charts:yAxis name="Assessment Total" position="RIGHT" alignTicks="true"/>
    </charts:yAxes>

    <!-- Add yAxisIndex for each series to bind yAxis to their corresponding data -->
    <charts:series>
        <charts:bar name="Salary" yAxisIndex="0"/>
        <charts:line name="Assessment Total" yAxisIndex="1"/>
    </charts:series>
</charts:chart>

这个图表提供了员工薪资和评分的可视化展示。

bar res