前端代码通过ajax调用后端接口拿到数据进行渲染
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/highcharts.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px"></div>
<script type="text/javascript"src="./js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
let series=[]
let xAxis=[]
$.ajax({
"url":"http://localhost:8888/findAll",
"type":"get",
"dataType":"json",
async:false,
success:(dataV)=>{
$.each(dataV,function (i,v){
series.push(parseInt(v.salary))
xAxis.push(v.name)
})
high(xAxis,series)
}
})
function high(xAxis,series){
console.log(xAxis,series)
var chart = Highcharts.chart('container', {
title: {
text: '员工工资信息图'
},
yAxis: {
title: {
text: '工资'
},
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
xAxis: {
categories: xAxis
},
series: [{
data: series,
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
}
});
</script>
</body>
</html>
测试：
这篇博客展示了如何在前端通过Ajax调用后端接口获取数据，并利用Highcharts库将数据渲染成图表。代码中，jQuery用于发起Ajax请求，从`http://localhost:8888/findAll`获取员工工资信息，然后使用Highcharts创建一个柱状图，展示员工姓名（x轴）及其对应的工资（y轴）。博客重点在于前端数据获取与图表库的应用。
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
