如何将数据从 struts2 发送到 javascript 函数以绘制图表

Question

我需要将动态图表添加到我的 web 应用程序中。 我选择了 chartjs 作为库（用于折线图） 在创建包含图表的页面并定义从数据库中检索数据的操作后，我在将数据从操作发送到生成折线图的脚本时遇到了一些问题。

servlet 给出一个 Bean 的 ArrayList 作为输出

@Action(value="/graphDataFetcher")
public String execute(){
    //Connessione a database 
    DBUtility database= new DBUtility(); 
    Connection connessione=database.getConnected();
    listamusei=database.getMusei(connessione);
    //Recupero in liste di musei e mostre correlate
    for(Museo ms: listamusei){
        mostre=new ArrayList<Mostra>();
        mostre=database.getMostraInMuseo(String.valueOf(ms.getId()), connessione);
        ms.setMostre(mostre);
    }
    //Disconnessione da database
    database.getDisconnected();
    return "ok";
}

这是“规则”图表的脚本，我想将 bean 的属性设置为 value1、value2、value3.. 等等。

<script>
    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
    var lineChartData = {
    labels : ["January","February","March","April","May","June","July"],
        datasets : [
        {
            label: "My First dataset",
            fillColor : "rgba(220,220,220,0.2)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(220,220,220,1)",
            data : [value1, value2, value3, value4]
         },
         ]
    }
    window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
    responsive: true
    });
}
</script>

有人知道如何解决这个问题吗？

Answer 1

您可以通过两种方式使用 1. 使用 setter、getter 生成一个列表并在此列表中添加数据。在 jsp 页面中使用 strcts 标记库，在 javascript 变量中放置列表数据。然后使用类似

的数据调用 chartjs 库函数

<script type="text/javascript">
var a = new Array();
<s:iterator var="newsVar" value="newsList" status="newsStatus">
a[<s:property value="#newsStatus.index"/>]='<s:property value="id"/>';
</s:iterator>
$(document).ready(function(){
 chartjsfunction(a);
});
</script>

1. 发送 ajax 调用数据以执行操作并将数据发送到 chartjs 库函数。