Javascript 填充JS ajax servlet_Javascript_Ajax_Servlets_Chart.js

Javascript 填充JS ajax servlet

javascript ajax servlets chart.js

Javascript 填充JS ajax servlet,javascript,ajax,servlets,chart.js,Javascript,Ajax,Servlets,Chart.js,我对ajax和java中的图表制作非常陌生。我对使用ChartJS为web报表创建动态仪表板非常感兴趣。我想问一下，如何使用ajax和来自servlet响应的数据填充“图表标签”和“数据集” 我尝试了一些研究，测试了一些关于ajax和ChartJS的教程，但我似乎无法让它工作 <html> <head> <title>Bar Chart</title> <script s

我对ajax和java中的图表制作非常陌生。我对使用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>


条形图
帆布{
}
var barChartData={
标签：[，“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2201）”，
数据：[65,59,90,81,56,55,40]
},
{
填充颜色：“rgba（151187205,0.5）”，
strokeColor:“rgba（151187205,1）”，
数据：[28,48,40,19,96,27100]
}
]
}
var myLine=新图表（document.getElementById（“canvas”）.getContext（“2d”））.Bar（barChartData）；

找到了答案，我只是在一些教程上做了实验。。。这个正在工作

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


JSP页面
你好，世界！






$（文档）.ready（函数（）{
GetCountryList（）；
});
函数GetCountryList（）{
var data2=“”；
$.ajax({
类型：“POST”，
网址:"qs",，
数据：“{\'类型\”：“+”国家\”
"}",
contentType:“application/x-www-form-urlencoded”，
数据类型：“json”，
成功：功能（响应）{
var resultsArray=（响应类型）='string'？eval（'（'+response+'））：响应；
var data2=新数组（）；
对于（var i=0；i