<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<#assign ctx=request.contextPath/>
<title>highcharts的使用</title>
<script src="/static/jquery-3.2.1.js"></script>
<script src="/static/highcharts.js"></script>
<script> $(document).ready(function () {
$.ajax({
url: "countAge",
dataType: "json",
method: "GET",
success: function (data) {
var userNames = [];
var userAges = [];
alert(data);
$.each(data, function (index, item) {
userNames.push(item.name);
userAges.push(item.password);
});
showChart(userNames, userAges);
}
});
});
//显示图表
function showChart(userNames, userAges) {
var chart = {type: 'column'};
var title = {text: '年龄最大的前三名用户'};
var xAxis = {categories: ['用户'], crosshair: true};
var yAxis = {min: 0, title: {text: '年龄 (岁)'}};
var tooltip = {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y} 岁</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
};
var plotOptions = {column: {pointPadding: 0.2, borderWidth: 0}};
var credits = {enabled: false};
var series = [];
for(var i=0;i<userNames.length;i++){
series.push({name: userNames[i], data: [userAges[i]]});
}
var json = {};
json.chart = chart;
json.title = title;
//json.subtitle = subtitle;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
json.credits = credits;
$('#container').highcharts(json);
} </script>
</head>
<body> <h1>highcharts的使用</h1>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
</body>
</html>
使用highcharts
最新推荐文章于 2021-12-17 15:41:47 发布
扫一扫
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
