<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body { overflow: hidden }
.wrapper {
position: relative
margin: 1em auto
padding: 0
width: 13em height: 5em
box-shadow: inset -1px -1px 0 black
list-style: none
background: linear-gradient(black 2.5%, transparent 1px),
linear-gradient(90deg, black 2.5%, transparent 1px)
background-size: 1em 1em
font: 2.5em Verdana, sans-serif
}
.piece {
position: absolute
right: 0 bottom: 0
opacity: .85
animation: ani 4s infinite linear alternate
}
.triangle { overflow: hidden transform-origin: 0 100% }
.piece:before {
position: absolute
content: ''
}
.triangle:before {
width: inherit height: inherit
transform-origin: inherit
}
.block { width: 5em height: 1em }
.block:before { height: 1em background: inherit }
.triangle-big {
right: 5em
width: 8em height: 3em
transform: skewX(-69.444deg) /* -arctan(width/height) */
animation-name: ani-triangle-big
}
.triangle-big:before {
background: crimson
transform: skewX(69.444deg) /* arctan(width/height) */
}
.triangle-small {
bottom: 3em
width: 5em height: 2em
transform: skewX(-68.2deg) /* -arctan(width/height) */
animation-name: ani-triangle-small
}
.triangle-small:before {
background: mediumvioletred
transform: skewX(68.2deg) /* arctan(width/height) */
}
.block-high {
bottom: 2em
background: darkmagenta
animation-name: ani-block-high
}
.block-high:before {
top: 100%
width: 2em
}
.block-low {
background: darkviolet
}
.block-low:before {
right: 0 bottom: 100%
width: 3em
}
@keyframes ani-triangle-big {
0%, 25% {
right: 5em bottom: 0
transform: rotate(0deg) skewX(-69.444deg)
}
75%, 100% {
right: 0 bottom: 2em
transform: rotate(360deg) skewX(-69.444deg)
}
}
@keyframes ani-triangle-small {
0%, 25% {
right: 0 bottom: 3em
transform: rotate(0deg) skewX(-68.2deg)
}
75%, 100% {
right: 8em bottom: 0
transform: rotate(-360deg) skewX(-68.2deg)
}
}
@keyframes ani-block-high {
0%, 25% { right: 0 bottom: 2em }
75%, 100% { right: 3em bottom: 1em }
}
</style>
</head>
<body>
<ul class='wrapper'>
<li class='piece triangle triangle-big'></li>
<li class='piece triangle triangle-small'></li>
<li class='piece block block-low'></li>
<li class='piece block block-high'></li>
</ul>
</body>
</html>
1、数据准备
在制作图表前，需要先定义图表的数据来源。新建工作簿，添加数据集，SQL语句为SELECT*FROM[销量]，使用销量表作为图表的数据来源。
2、插入图表并选择图表类型
点击工具栏中的插入>悬浮元素>插入图表，d出图表向导，选择图表类型如柱形图，如下图：
3、定义图表样式
选择完图表类型后，点击确定，返回报表主体界面，选中悬浮图表，在报表主体右侧上方的图表属性表中设置图表属性，选择图表属性表-数据，设置柱形图的数据，如下图：
4、设置图表样式
对图表标题、标签等样式进行相应的设置
5、保存模板并预览。
工具/材料SublimeText
打卡SublimeText，新建HTML5页面，然后在页面中插入jquery和highcharts的脚本文件，如下图所示
然后在body元素中定义放置柱形图的div容器，如下图所示，注意给div设置宽和高
接下来在script中订单柱状图的标题，副标题，X，Y坐标轴的配置信息，如下图所示
然后就是准备柱状图的数据了，如下图所示，数据要和上面定义的X坐标轴进行匹配
接下来就是将所有准备好的数据和参数配置都放在json中，如下图所示，highcharts只接受json的传参方式
一切准备好之后，下面你就可以调用highcharts方法，并且传入所准备的json串来生成柱状图，如下图所示
最后，运行页面程序以后，你就可以看到自己定义的柱状图了，如下图所示
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）