Springboot highchartsとajaxを組み合わせた簡単な例
11533 ワード
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> title>
<script type="text/javascript" src="/Highcharts-6.0.4/code/highcharts.js">script>
<script type="text/javascript" src="/Highcharts-6.0.4/code/highcharts-3d.src.js">script>
<script type="text/javascript" src="/Highcharts-6.0.4/code/modules/exporting.js">script>
<script type="text/javascript" src="/js/jquery-3.2.1.js">script>
<script type="text/javascript" src="/js/china.js">script>
head>
<body onload="startime()" background="/images/datebook.jpg">
<div align="center" style="height:50px;border: 0px;">
<div id="div" style="border: 0px; display:inline; color:#112200;">div>
div>
<script>
function startime(){
var t=new Date();// date ， date
var year=t.getFullYear();
var mon=t.getMonth()+1;
var day=t.getDate();
var h=t.getHours();
var m=t.getMinutes();
var s=t.getSeconds();
var ms=t.getMilliseconds();
mon=checktime(mon);
day=checktime(day);
m=checktime(m);
s=checktime(s);
document.getElementById("div").innerHTML=' '+year+'-'+mon+'-'+day+' '+h+':'+m+':'+s;
t=setTimeout("startime()",100 );// ， ， ，
// ，500 0.5
}
function checktime(i) {// ， ， + 0
if(i<10)
{
i="0"+i;
}
return i;
}
script>
<#-- <div align="left">
<div id="bing" style="width: 50%;height:400px;display: inline-block;">div>
div>-->
<div align="center">
<div id="china" style="width: 80%;height:500px;display: inline-block;" >div>
div>
<div align="center">
<div id="line" style="width: 50%;height:400px;display: inline-block;" >div>
<div id="pie" style="width: 50%;height:400px;display: inline-block;">div>
div>
<script type="text/javascript">
$(function(){
var xtext = [];//X TEXT
var nums = [];//y
$.ajax({
url:'/userLog/loginCnt',//
type : "post",
async : true, // （ ， ）
data : {},
dataType : "json", // json
success:function(result){
for(var i=0;i0 ].setData(nums);
},
error:function(e){
}
});
var chart = new Highcharts.Chart({
chart:{
renderTo:'china',//div id
type:'column' //
},
title:{
text:' ' //
},
xAxis:{
categories:xtext
},
yAxis:{
title:{
text:' ' //Y
},
},
series:[{
name:" "
}],
credits: {//
enabled: false
}
});
});
script>
body>
html>