Question

我对java中的ajax和charting很新。我非常感兴趣使用ChartJS为Web报告创建动态仪表板。我想问一下如何使用ajax和来自servlet响应的数据来填充“图表标签”和“数据集”。

我尝试了一些研究并测试了一些关于ajax和ChartJS的教程，但我似乎无法使它工作..

    <html>
        <head>
            <title>Bar Chart</title>
            <script src="../Chart.js"></script>
            <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
            <style>
                canvas{
                }
            </style>
        </head>
        <body>
            <canvas id="canvas" height="450" width="600"></canvas>


        <script>

            var barChartData = {
                labels : [,"January","February","March","April","May","June","July"],
                datasets : [
                    {
                        fillColor : "rgba(220,220,220,0.5)",
                        strokeColor : "rgba(220,220,220,1)",
                        data : [65,59,90,81,56,55,40]
                    },
                    {
                        fillColor : "rgba(151,187,205,0.5)",
                        strokeColor : "rgba(151,187,205,1)",
                        data : [28,48,40,19,96,27,100]
                    }
                ]

            }

        var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);

        </script>
        </body>
    </html>

Answer 1

找到答案，我只是试验一些教程...... 这个工作正在......

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
        <script src="js/Chart.js"></script>
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Hello World!</h1>   
        <br />

        <br/>


        <br/>
        <canvas id="canvas" height="450" width="700"></canvas>

    </body>
</html> 
<script>

            $( document ).ready(function(){
                GetCountryList();
            });


    function GetCountryList(){
        var data2 = "";
        $.ajax({
            type: "POST",
            url: "qs",
            data: "{\"type\":" + "\"country\""+      
           "}",
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            success: function(response) {

                var resultsArray =  (typeof response) == 'string' ? eval('(' + response + ')')    : response;  



                var data2 = new Array();
                for(var i=0; i<resultsArray.length;i++){
                    data2[i] =  resultsArray[i].workgroup;


                    var barChartData = {
                            labels : data2,
                            datasets : [
                                    {
                                            fillColor : "rgba(220,220,220,0.5)",
                                            strokeColor : "rgba(220,220,220,1)",
                                            data : [65,59,90,81,56,55,40,80]
                                    }
                            ]

                    };
               }


        var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);

            }


        });                 

    }

</script>

填充chartjs ajax servlet

1 个答案: