序列图

使用 SerialChart 组件可以创建线图、区域图、列图、柱图、步进线图,平滑线图,烛台图以及蜡烛图。图表支持多坐标轴,坐标轴支持简单或者对数刻度,数据点可以等距/非等距展示或者基于时间线展示。

line chart
线图展示的序列图
column line
列图展示的序列图

组件的 XML 名称:chart:serialChart

数据绑定

可以为图表指定一个 CollectionContainer。然后为 serialChart 元素定义 categoryField 属性,为内部的 graph 元素定义 valueField 属性:

<chart:serialChart id="lineChart"
                   autoMarginOffset="20"
                   categoryField="date"
                   dataContainer="dateValueDc"
                   height="100%"
                   marginRight="40"
                   marginLeft="40"
                   mouseWheelZoomEnabled="true"
                   theme="LIGHT"
                   width="100%">
    <chart:graphs>
        <chart:graph id="g1"
                     bullet="ROUND"
                     bulletBorderAlpha="1"
                     bulletColor="WHITE"
                     bulletSize="5"
                     hideBulletsCount="50"
                     lineThickness="2"
                     title="Red line"
                     useLineColorForBulletBorder="true"
                     valueField="value"
                     balloonText="&lt;span style='font-size:18px;'&gt;[[value]]&lt;/span&gt;">
            <chart:balloon adjustBorderColor="false"
                           color="WHITE"
                           drop="true"/>
        </chart:graph>
    </chart:graphs>
    <chart:categoryAxis dashLength="1"
                        minorGridEnabled="true"/>
</chart:serialChart>

事件和处理器

如需使用 Jmix Studio 生成处理器的桩代码,需要在界面 XML 描述或者 Jmix UI 层级结构面板选中该组件,然后用 Jmix UI 组件面板的 Handlers 标签页生成。

或者可以使用界面控制器顶部面板的 Generate Handler 按钮。

更多细节,参阅 AmCharts 文档