如何将JSP数组传递给highchart的Javascript以生成柱状图_Javascript_Json_Jsp_Highcharts

如何将JSP数组传递给highchart的Javascript以生成柱状图

javascript json jsp highcharts

如何将JSP数组传递给highchart的Javascript以生成柱状图,javascript,json,jsp,highcharts,Javascript,Json,Jsp,Highcharts,我是Highcharts、JSP和Javascript方面的新手，需要您在这个问题上的意见和建议，我已经挣扎了4-5天了。请帮帮我问题是我能够从JSP中获得两个输出数组，我需要将它们传递到highchart JS中以生成列图 [99, 90, 87, 82, 80, 77, 70, 65, 65, 60] and ['orcl2','orcl2','orcl2','orcl2','orcl1','orcl1','orcl3','orcl2','orcl3','orcl1'] 但我无法将值传递

我是Highcharts、JSP和Javascript方面的新手，需要您在这个问题上的意见和建议，我已经挣扎了4-5天了。请帮帮我

问题是我能够从JSP中获得两个输出数组，我需要将它们传递到highchart JS中以生成列图

[99, 90, 87, 82, 80, 77, 70, 65, 65, 60] and
['orcl2','orcl2','orcl2','orcl2','orcl1','orcl1','orcl3','orcl2','orcl3','orcl1']

但我无法将值传递给JS以生成列图。下面是我正在使用的全部代码。请告诉我哪里出了问题

<%@ page language="java" import="java.sql.*, java.io.*, java.util.Date, java.util.*,javax.servlet.*, java.text.SimpleDateFormat, java.util.Calendar " %>
<%  Class.forName("oracle.jdbc.driver.OracleDriver"); %>
 <%
     Connection connection=DriverManager.getConnection ("jdbc:oracle:thin:@RAC1.dinu.com:1521:orcl2","cog","cog123");
     Statement statement12 = connection.createStatement();
          ResultSet resultset12 = 
            statement12.executeQuery("select * from(select HOST_NAME,INSTANCE_NAME,PID,PCPU, to_char(TIME, 'yyyy-mm-dd hh24:mi:ss') from ORA_CPU_STATUS where trunc(TIME)=trunc(sysdate) order by PCPU desc) where rownum<=10");
 %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
<script type="text/javascript" src="/DBdashboard/1.js"></script>
<script type="text/javascript" src="/DBdashboard/2a.js"></script>
<script type="text/javascript" src="/DBdashboard/3a.js"></script>
<script type="text/javascript" src="/DBdashboard/highcharts-more.js"></script>
<script type="text/javascript" src="/DBdashboard/json2.js"></script>
        <script>
$(function () {
    var chart;

   <%
List<String> list = new ArrayList<String>();
List<String> list2 = new ArrayList<String>();
while(resultset12.next())
{
    String val = resultset12.getString(1);
    list.add(val);
    String val2 = resultset12.getString(2);
    list2.add(val2);

String csv = list2.toString().replace("[", "").replace("]", "");
String csvWithQuote = list.toString().replace("[", "'").replace("]", "'").replace(", ", "','");
%>
var dincpu = '<%=csv%>';
var dinpcat = '<%=csvWithQuote%>';
var input = JSON.parse("[" + dincpu + "]"),
       data = [],
categories = JSON.parse("[" + dinpcat + "]");
    $.each(input, function(index, value){
        var color;
        if (value > 80) color = 'red';
        else if (value > 60) color = 'Orange';
        else color = 'green';
        data.push({y:value, color: color, url:'https://www.google.com'});
    });

    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'COL',
                type: 'column'
            },
            title: {
                text: 'Current Top 10 CPU Consumers',
                    style: {fontSize: '10px'}
            },
            xAxis: {
                categories: categories,
                labels: {
                    rotation: -35,
                    align: 'center'
                }
            },
           yAxis: {
                title: {
                    text: 'Percentage',
                    style: {fontSize: '11px'}
                }
            },
            exporting: { enabled: false },
             legend: {
                enabled: false,
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b>' +'- Oracle User Process CPU Consumed :'+'<b>'+ this.y +' % ' +'</b>' ;
                }
            },
       plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            location.href = this.options.url;
                        }
                    }
                }
            }
        },
                series: [{
                name: 'CPU Consumed',
        pointWidth: 28,
                data: data

            }]
        });
    });
});
</script>
</head>
<body>
<div id="COL" style="min-width: 100px; height: 300px; margin: 0 auto"></div>
</body>
</html>


海图示例
$（函数（）{
var图；
var-dincpu=''；
var dinpcat=“”；
var input=JSON.parse（“[”+dincpu+“]），
数据=[]，
categories=JSON.parse（“[”+dinpcat+“]）；
$.each（输入、函数（索引、值）{
颜色变异；
如果（值>80）颜色='红色'；
否则，如果（值>60）颜色='橙色'；
其他颜色='绿色'；
推送（{y:value，color:color，url:'https://www.google.com'});
});
$（文档）.ready（函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:“COL”，
类型：“列”
},
标题：{
文本：“当前10大CPU用户”，
样式：{fontSize:'10px'}
},
xAxis：{
类别:类别,，
标签：{
轮调：-35，
对齐：“居中”
}
},
亚克斯：{
标题：{
文本：“百分比”，
样式：{fontSize:'11px'}
}
},
正在导出：{enabled:false}，
图例：{
启用：false，
},
工具提示：{
格式化程序：函数（）{
返回''+this.x+'+'-Oracle用户进程CPU消耗量：'+'+this.y+'%'+''；
}
},
打印选项：{
系列：{
光标：“指针”，
要点：{
活动：{
单击：函数（）{
location.href=this.options.url；
}
}
}
}
},
系列：[{
名称：“CPU已消耗”，
点宽度：28，
数据：数据
}]
});
});
});

提前感谢…

我不太确定您将如何使用此代码

String csv = list2.toString().replace("[", "").replace("]", "");
String csvWithQuote = list.toString().replace("[", "'").replace("]", "'").replace(", ", "','");
%>
var dincpu = '<%=csv%>';
var dinpcat = '<%=csvWithQuote%>';
var input = JSON.parse("[" + dincpu + "]"),
       data = [],
categories = JSON.parse("[" + dinpcat + "]");

为什么不这样做（删除并去掉JSON.parse）

var-dincpu=；
var dinpcat=；

芭芭拉，它终于成功了

var dincpu = <%=csv%>;
var dinpcat = <%=csvWithQuote%>;

var-dincpu=；
var dinpcat=；

还有你给我的小提琴。我把所有的代码都放在了答案中，这些代码实际上是有效的

<%@ page language="java" import="java.sql.*, java.io.*, java.util.Date, java.util.*,javax.servlet.*, java.text.SimpleDateFormat, java.util.Calendar " %>
<%  Class.forName("oracle.jdbc.driver.OracleDriver"); %>
 <%
     Connection connection=DriverManager.getConnection ("jdbc:oracle:thin:@RAC1.dinu.com:1521:orcl2","cog","cog123");
     Statement statement12 = connection.createStatement();
          ResultSet resultset12 = 
            statement12.executeQuery("select * from(select INSTANCE_NAME,PCPU from ORA_CPU_STATUS order by PCPU desc) where rownum<=10");


List<String> list = new ArrayList<String>();
List<String> list2 = new ArrayList<String>();
while(resultset12.next())
{
    String val = resultset12.getString(1);
    list.add(val);
    String val2 = resultset12.getString(2);
    list2.add(val2);

}

String csv = list2.toString();
String csvWithQuote = list.toString().replace("[", "['").replace("]", "']").replace(", ", "','");

%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
<script type="text/javascript" src="/DBdashboard/1.js"></script>
<script type="text/javascript" src="/DBdashboard/2a.js"></script>
<script type="text/javascript" src="/DBdashboard/3a.js"></script>
<script type="text/javascript" src="/DBdashboard/highcharts-more.js"></script>
<script type="text/javascript" src="/DBdashboard/json2.js"></script>
<script>
$(function () {
    var dincpu=<%=csv%>;
    var dinpcat = <%=csvWithQuote%>;
    var input = dincpu,
        data = [],
        categories =dinpcat;
        $.each(input, function(index, value){
            var color;
            if (value > 80) color = 'red';
            else if (value > 60) color = 'Orange';
            else color = 'green';
            data.push({y:value, color: color, url:'https://www.google.com'});
        });

    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'COL',
            type: 'column'
        },
        title: {
            text: 'Current Top 10 CPU Consumers',
            style: {fontSize: '10px'}
        },
        xAxis: {
            categories: categories,
            labels: {
                rotation: -35,
                align: 'center'
            }
        },
        yAxis: {
            title: {
                text: 'Percentage',
                style: {fontSize: '11px'}
            }
        },
        exporting: { enabled: false },
        legend: {
            enabled: false,
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b>' +'- Oracle User Process CPU Consumed :'+'<b>'+ this.y +' % ' +'</b>' ;
            }
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            location.href = this.options.url;
                        }
                    }
                }
            }
        },
        series: [{
            name: 'CPU Consumed',
            pointWidth: 28,
            data: data

        }]
    });
});
</script>
</head>
<body>
<div id="COL" style="min-width: 100px; height: 300px; margin: 0 auto"></div>
</body>
</html>


海图示例
$（函数（）{
var dincpu=；
var dinpcat=；
var输入=dincpu，
数据=[]，
类别=dinpcat；
$.each（输入、函数（索引、值）{
颜色变异；
如果（值>80）颜色='红色'；
否则，如果（值>60）颜色='橙色'；
其他颜色='绿色'；
推送（{y:value，color:color，url:'https://www.google.com'});
});
图表=新的高点图表。图表({
图表：{
renderTo:“COL”，
类型：“列”
},
标题：{
文本：“当前10大CPU用户”，
样式：{fontSize:'10px'}
},
xAxis：{
类别:类别,，
标签：{
轮调：-35，
对齐：“居中”
}
},
亚克斯：{
标题：{
文本：“百分比”，
样式：{fontSize:'11px'}
}
},
正在导出：{enabled:false}，
图例：{
启用：false，
},
工具提示：{
格式化程序：函数（）{
返回''+this.x+'+'-Oracle用户进程CPU消耗量：'+'+this.y+'%'+''；
}
},
打印选项：{
系列：{
光标：“指针”，
要点：{
活动：{
单击：函数（）{
location.href=this.options.url；
}
}
}
}
},
系列：[{
名称：“CPU已消耗”，
点宽度：28，
数据：数据
}]
});
});
@Barbara，
1） 如果您看到最新的代码，我将所有JSP脚本放在顶部，然后调用
var dincpu = <%=csv%>;
var dinpcat = <%=csvWithQuote%>;

var-dincpu=；
var dinpcat=；

之后，我可以在网页的view source中看到这些值被传递到JS函数中的JS变量。
2） 然后把你放在小提琴上的JS代码放在小提琴上。
3） 我觉得函数$（document）.ready（function（）导致了我删除的问题。
另一件重要的事情是，因为我把所有的代码都放在一个虚拟的linux框中，所以在我从windows文本编辑器（Editplus）处理时，可能会有一些隐藏字符被复制
我发现所有这三件事都是问题的原因。静态值工作正常，但动态值没有发生。我将代码修改为：String csv=list2.toString（）；String csvWithQuote=list.toString（）.replace（“[”，“[”）.replace（“]，“]”）。replace（“，“，”）”）.replace（“，”，“，”）；%>var-dincpu=；var-dinpcat=；var-input=dincpu，data=[]，categories=dinpcat；它的抛出错误。============================HTTP状态500-无法为JSP编译类：类型异常报告消息无法为JSP编译类：忽略我在此次更新之前提到的错误，我只是错过了一个“}”.现在我只得到了图表的标题和
<%@ page language="java" import="java.sql.*, java.io.*, java.util.Date, java.util.*,javax.servlet.*, java.text.SimpleDateFormat, java.util.Calendar " %>
<%  Class.forName("oracle.jdbc.driver.OracleDriver"); %>
 <%
     Connection connection=DriverManager.getConnection ("jdbc:oracle:thin:@RAC1.dinu.com:1521:orcl2","cog","cog123");
     Statement statement12 = connection.createStatement();
          ResultSet resultset12 = 
            statement12.executeQuery("select * from(select INSTANCE_NAME,PCPU from ORA_CPU_STATUS order by PCPU desc) where rownum<=10");


List<String> list = new ArrayList<String>();
List<String> list2 = new ArrayList<String>();
while(resultset12.next())
{
    String val = resultset12.getString(1);
    list.add(val);
    String val2 = resultset12.getString(2);
    list2.add(val2);

}

String csv = list2.toString();
String csvWithQuote = list.toString().replace("[", "['").replace("]", "']").replace(", ", "','");

%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
<script type="text/javascript" src="/DBdashboard/1.js"></script>
<script type="text/javascript" src="/DBdashboard/2a.js"></script>
<script type="text/javascript" src="/DBdashboard/3a.js"></script>
<script type="text/javascript" src="/DBdashboard/highcharts-more.js"></script>
<script type="text/javascript" src="/DBdashboard/json2.js"></script>
<script>
$(function () {
    var dincpu=<%=csv%>;
    var dinpcat = <%=csvWithQuote%>;
    var input = dincpu,
        data = [],
        categories =dinpcat;
        $.each(input, function(index, value){
            var color;
            if (value > 80) color = 'red';
            else if (value > 60) color = 'Orange';
            else color = 'green';
            data.push({y:value, color: color, url:'https://www.google.com'});
        });

    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'COL',
            type: 'column'
        },
        title: {
            text: 'Current Top 10 CPU Consumers',
            style: {fontSize: '10px'}
        },
        xAxis: {
            categories: categories,
            labels: {
                rotation: -35,
                align: 'center'
            }
        },
        yAxis: {
            title: {
                text: 'Percentage',
                style: {fontSize: '11px'}
            }
        },
        exporting: { enabled: false },
        legend: {
            enabled: false,
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b>' +'- Oracle User Process CPU Consumed :'+'<b>'+ this.y +' % ' +'</b>' ;
            }
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            location.href = this.options.url;
                        }
                    }
                }
            }
        },
        series: [{
            name: 'CPU Consumed',
            pointWidth: 28,
            data: data

        }]
    });
});
</script>
</head>
<body>
<div id="COL" style="min-width: 100px; height: 300px; margin: 0 auto"></div>
</body>
</html>

var dincpu = <%=csv%>;
var dinpcat = <%=csvWithQuote%>;