是否可以使用 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;
    }
}

Model 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 軸上顯示字符串。 通過這種配置，我在條形圖上看不到任何數據。 是否可以使用字符串作為條形圖的 x 軸？ 如果是，我的代碼有什么問題？

Answer 1

您在條形圖上看不到任何數據，因為您使用錯誤的 URL 將數據獲取到chartData標簽。 在您的chartData標簽中，您正在使用 Ajax 獲取數據。 因此，您應該參考以可接受的格式返回數據的 URL。 在您的情況下，您使用的是數據類型 JSON。 在您的操作 class 中，您有這樣的操作返回 json 類型的結果。 class 路徑上應該有 json 插件可用。 要為您可以使用的操作構建 URL

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

然后在chartData標簽中引用

href="%{#chartDataUrl}"

默認情況下，json 結果從序列化為 json ZA8CFDE6331BD59EB2AC96F8911C4B66 的ValueStack中返回top object ZA8CFDE6331BD59EB2AC96F8911C4B66。

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

並且list屬性綁定到具有相應 getter 的操作 class 的變量。 因為您使用對象列表，所以默認情況下listKey和listValue綁定到帶有 getter 的 object 變量。

另請注意 struts2-jquery-chart 的版本應更新以包含用於由插件繪制圖表的Flot庫。 有關更多詳細信息，請參閱此答案。