本节记录使用highcharts展示柱状图的代码。
1、操作步骤
- 创建一个web工程
- 在webapp下创建以下文件index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<title>Title</title>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<button onclick="showcharts()">展示报表</button>
<div id="container" style="min-width:400px;height:400px"></div>
</body>
<script type="text/javascript">
var data = [
['衬衫', 820],
['羊毛衫', 932],
['雪纺衫', 901],
['裤子', 934],
['高跟鞋', 1290],
['袜子', 1330]];
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: '第一个 HighCharts 实例'
},
xAxis: {
type: 'category',
labels: {
rotation: -45 // 设置轴标签旋转角度
}
},
yAxis: {
min: 0,
title: {
text: '销量 (百万)'
}
},
tooltip: {
pointFormat: '销售总量: <b>{point.y:.1f} 百万</b>'
},
series: [{
name: '总销量',
data: data
}]
});
function showcharts() {
var data = [
['abc', 123],
['efg', 456],
['hij', 789]];
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: '第一个 HighCharts 实例'
},
xAxis: {
type: 'category',
labels: {
rotation: -45 // 设置轴标签旋转角度
}
},
yAxis: {
min: 0,
title: {
text: '销量 (百万)'
}
},
tooltip: {
pointFormat: '销售总量: <b>{point.y:.1f} 百万</b>'
},
series: [{
name: '总销量',
data: data
}]
});
}
</script>
</html>
- 把工程在容器中启动，假设端口为8080，则访问 http://localhost:8080/index.html，展示出以下效果：
highcharts柱状图
网友评论