是否可以使用 Struts2 jQuery 图表插件制作带有字符串 X 轴的条形图？

Question

我正在使用 struts2-jquery-chart-plugin-3.2.1。我想显示一个由列表填充的条形图。

这是我的代码：

动作class:

public class FinancialChartAction extends ActionSupport{
    private List<FinChartModel> wholeChartModels;

    @SkipValidation
    @Action(value = "getFinancialChartData", results = {
        @Result(name = "success", type = "json", params = {
            "wholeChartModels"
        })}){
        wholeChartModels = new ArrayList<FinChartModel>();     
        wholeChartModels.add(new FinChartModel("2020/01/01", 1000));
        wholeChartModels.add(new FinChartModel("2020/01/02", 2000));
        wholeChartModels.add(new FinChartModel("2020/01/03", 3500));
        wholeChartModels.add(new FinChartModel("2020/01/04", 550));

}

    public List<FinChartModel> getWholeChartModels() {
        return wholeChartModels;
    }
}

型号class:

    private String registerDate;
    private Long sellValue;

    public String getRegisterDate() {
        return registerDate;
    }

    public void setRegisterDate(String registerDate) {
        this.registerDate = registerDate;
    }

    public Long getSellValue() {
        return sellValue;
    }

    public void setSellValue(Long sellValue) {
        this.sellValue = sellValue;
    }

    FinChartModel(String registerDate,Long sellValue){
        this.registerDate = registerDate;
        this.sellValue = sellValue;
    }

JSP:

<div id="gain_chart">
    <sjc:chart
        id="chartAjaxTwo"
        cssStyle="width: 600px; height: 400px;">
        <sjc:chartData
            dataType="json"
            id="chartAjaxTwoData2"
            label="List -ListValue-"
            href="%{getFinancialChartData}"
            list="wholeChartModels"
            listKey="registerDate"
            listValue="sellValue"
            bars="{show : true, barWidth: 0.7}"
            />
    </sjc:chart>
</div>

如您所见，我希望我的图表在 x 轴上显示字符串。通过这种配置，我在条形图上看不到任何数据。是否可以使用 String 作为条形图的 x 轴？如果是，我的代码有什么问题？

Answer 1

您在条形图上看不到任何数据，因为您使用错误的 URL 将数据获取到 chartData 标记。在您的 chartData 标签中，您使用 Ajax 获取数据。因此，您应该以可接受的格式引用 URL 和 returns 数据。在您的情况下，您使用的是数据类型 JSON。在您的操作 class 中，您有这样的操作 returns 类型 json 的结果。 class 路径上应该有 json 插件可用。要为操作构建 URL，您可以使用

<s:url var="chartDataUrl" action="getFinancialChartData"/>

然后在chartData标签中引用它

href="%{#chartDataUrl}"

json结果默认returnstop对象从ValueStack序列化为json对象和Struts放置动作实例

@Result(name = "success", type = "json")

并且 list 属性绑定到具有相应 getter 的操作 class 的变量。因为您使用对象列表，所以 listKey 和 listValue 默认绑定到具有 getter 的对象变量。

另请注意，struts2-jquery-chart 的版本应更新为包含 Flot 插件用于绘制图表的库。有关详细信息，请参阅 答案。