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

Question

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

这是我的代码：

动作类：

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;
    }
}

模型类：

    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 轴上显示字符串。通过这种配置，我在条形图上看不到任何数据。是否可以使用字符串作为条形图的 x 轴？如果是，我的代码有什么问题？

Answer 1

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

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

然后在chartData标签中引用它

href="%{#chartDataUrl}"

json 结果默认从ValueStack 序列化为json 对象返回top 对象，Struts 将动作实例放入其中。

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

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

还要注意 struts2-jquery-chart 的版本应该更新为包含Flot 库，该库用于由插件绘制图表。更多详情见this答案。