时间戳

首页 > 解决方案 > 古巴平台图表：垂直对齐

xml - 古巴平台图表：垂直对齐

问题描述

您好，我为仪表板构建了一个古巴图表，并且有两个问题：

  1. 如何使序列图垂直？
  2. 怎么去掉红气球？
  3. 为什么 x 轴从 10 变为 20？应该有“dokumentiert”类别。

在此处输入图像描述

这是我的 XML：

 <chart:serialChart id="stackedArea"
                               height="100%"
                               marginLeft="0"
                               marginTop="10"
                               plotAreaBorderAlpha="0"
                               width="100%">
                <chart:chartCursor cursorAlpha="0"/>
                <chart:legend equalWidths="false"
                              periodValueText="total: [[value.sum]]"
                              position="TOP"
                              valueAlign="LEFT"
                              valueWidth="100"/>
                <chart:valueAxes>
                    <chart:axis axisAlpha="0"
                                position="LEFT"/>
                </chart:valueAxes>
                <chart:balloon adjustBorderColor="false"
                               color="WHITE"
                               horizontalPadding="10"
                               verticalPadding="8"/>
                <chart:graphs>
                    <chart:graph fillAlphas="0.6"
                                 type="COLUMN"
                                 lineAlpha="0.4"
                                 title="dokumentiert"
                                 valueField="anzahl"/>
                </chart:graphs>
                <chart:categoryAxis axisColor="#DADADA"
                                    axisAlpha="0"
                                    startOnAxis="true"
                                    gridPosition="START">
                </chart:categoryAxis>
                <chart:export/>
            </chart:serialChart>

这是我的控制器：

public class Balkendiagramm extends ScreenFragment {
    @Inject
    private SerialChart stackedArea;
    @Inject
    private KeyValueCollectionLoader filesDl;
    @Inject
    private KeyValueCollectionContainer filesDc;

    @Subscribe
    public void onInit(InitEvent event) {
        filesDl.load();
        stackedArea.setDataProvider(new ContainerDataProvider(filesDc));
        stackedArea.setCategoryField("dokStatus");
    }
}

标签： xmlchartscuba-platform

解决方案

可以使用以下方法禁用红色气球categoryBalloonEnabled="false"：

<charts:chartCursor categoryBalloonEnabled="false"/>

或者只是删除<charts:chartCursor/>自己。

我假设该dokStatus属性具有枚举类型。您可以尝试在 KeyValueCollection 属性中定义枚举类：

<keyValueCollection id="keyValueDc">
    ...
    <properties>
        ...
        <property name="dokStatus" class="com.company.myapp.entity.Status"/>
    </properties>
</keyValueCollection>

在这种情况下，您将在 Chart 类别中获得本地化的枚举值。此外，您不必KeyValueCollection在控制器中设置数据提供者，因为图表的dataContainer属性支持它：

<charts:serialChart id="stackedArea"
                    dataContainer="keyValueDc"
                    categoryField="docStatus"

推荐阅读