chart实现收入曲线图表效果代码
代码语言:html
所属分类:图表
代码描述:chart实现收入曲线图表效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet"> <style> :root { --background: #070707; --background-widget: #181818; --primary: #3DA06E; } * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: 'Poppins', sans-serif; background-color: var(--background); height: 100vh; } .widget { border-radius: 0.75rem; background-color: var(--background-widget); padding: 1rem; max-width: 40rem; width: 100%; min-width: 20rem; } .widget canvas { min-height: 20rem; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chart.umd.4.4.1.js"></script> </head> <body> <div class="widget"> <canvas id="chart"></canvas> </div> <script> const ctx = document.getElementById("chart"); Chart.defaults.color = "#FFF"; Chart.defaults.font.family = "Poppins"; new Chart(ctx, { type: "line", data: { labels: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ].........完整代码请登录后点击上方下载按钮下载查看
网友评论0