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

How to send data from struts2 to a javascript function to draw a chart

本文关键字：函数 javascript 绘制 数据 struts2      更新时间：2023-09-26

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

servlet输出一个ArrayList of Beans

@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>

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

您可以通过两种方式使用1.使用setter、getter执行列表操作，并在此列表中添加数据。在jsp页面中使用strcts标记库，在javascript变量中使用put列表数据。然后用这样的数据调用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. 向action发送ajax数据调用，并向chartjs库函数发送数据
相关文章：