jsp使用highcharts 柱状图
程序员文章站
2022-06-09 23:29:45
...
如图:
html代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* css 代码 */
</style>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px"></div>
<script>
// JS 代码
</script>
</body>
</html>js代码:
var chart = Highcharts.chart('container',{
chart: {
type: 'column'
},
title: {
text: '柱状图'
},
subtitle: {
// text: '数据来源: WorldClimate.com'
},
xAxis: {
categories: [
'0-18','19-28','29-38','39-48','49-58','59以上'
],
crosshair: true
},
yAxis: {
title: {
text: ''
},
labels: {
//去掉左侧的显示
// formatter: function(){
// return "";
// },
//step:2
}
},
tooltip: {
// head + 每个 point + footer 拼接成完整的 table
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:.1f} 人</b></td></tr>',
footerFormat: '</table>',
},
plotOptions: {
column: {
borderWidth: 0,
//在图形上面显示
dataLabels: {
enabled: true,
color:'black'
}
},
series : {
minPointLength :2,//防止值太小图形显示不出来
// negativeColor:'#87CEFF', 设置负数条形的颜色
//color: '#F08080'//设置显示条颜色
colorByPoint:true//设置不同颜色
}
},
series: [{
name: '男',
data: [6, 1045, 73, 67, 57, 67]
}, {
name: '女',
data: [3, 23, 51, 48, 45, 42]
}]
});上一篇： php中文字符串截取解决方案
下一篇： Android 跑马灯