react实现图表
代码语言:html
所属分类:图表
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> - React bar chart</title> <style> .Charts { margin: 0 auto; background-color: #f9f9f9; display: flex; align-items: flex-end; padding: 50px; } .Charts.horizontal { display: block; } .Charts.horizontal .Charts--serie { display: block; margin: 0 0 30px 0; border: 0; } .Charts.horizontal .Charts--serie label { position: relative; top: auto; right: auto; left: 0; bottom: auto; padding: 0 0 10px 0; } .Charts--serie { height: 100%; margin: 0 30px 0 0; display: inline-block; flex: 1; display: flex; align-items: flex-end; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-animation: slideUp 0.6s; animation: slideUp 0.6s; position: relative; border-bottom: 1px solid #c2c2c2; } .Charts--serie.stacked { display: block; } .Charts--serie label { position: absolute; left: 0; right: 0; bottom: -20px; font-family: Helvetica, sans-serif; font-size: 10px; text-align: center; color: #808080; } .Charts.horizontal .Charts--item { display: block; border-radius: 0 2px 2px 0; margin: 0 0 5px 0; height: 1em; } .Charts.horizontal .Charts--item b { position: absolute; right: -20px; top: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0