css实现一个柱状图图表效果代码-html代码-BFW代码库

css实现一个柱状图图表效果代码

代码语言：html

所属分类：图表

代码描述：css实现一个柱状图图表效果代码，在chrome中无需js，仅凭css就能实现，但是在其他浏览器需要js的一段代码。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
<style>
    data-chart {
  --data-chart-bar-bdrs: clamp(0.125rem, -0.35rem + 1cqi, 0.33rem);
  --data-chart-bar-c: currentColor;
  --data-chart-bdw: 1px;
  --data-chart-bds: solid;
  --data-chart-bdc: light-dark(#CCC, #666);
  --data-chart-nolabel-bdw: 1px;
  --data-chart-nolabel-bds: solid;
  --data-chart-nolabel-bdc: light-dark(#EBEBEB, #444);

  --data-chart-caption-h: 1.5rem;
  --data-chart-label-h: 20px;
  --data-chart-label-w: 5rem;
  --data-chart-mih: 275px;
  --data-chart-y-axis-w: 1.5rem;

  --_min: attr(min type(<number>), 0);
  --_max: attr(max type(<number>), 100);

  --_xs: attr(items-xs type(<number>), 0);
  --_sm: attr(items-sm type(<number>), 0);
  --_md: attr(items-md type(<number>), 0);
  --_lg: attr(items-lg type(<number>), 0);
  --_xl: attr(items-xl type(<number>), 0);

  --c1: hsla(210, 60%, 60%, .75);
  --c2: hsla(170, 45%, 55%, .75);
  --c3: hsla(100, 40%, 55%, .75);
  --c4: hsla(60, 40%, 60%, .75);
  --c5: hsla(35, 50%, 65%, .75);
  --c6: hsla(15, 55%, 60%, .75);
  --c7: hsla(350, 50%, 60%, .75);
  --c8: hsla(280, 40%, 60%, .75);
  --c9: hsla(240, 45%, 55%, .75);
  --c10: hsla(200, 30%, 65%, .75);

  background: var(--data-chart-bg, #FFF0);
  border-radius: var(--data-chart-bdrs, .5rem);
  box-sizing: border-box;
  container-type: inline-size;
  display: block;
  font-family: var(--data-chart-ff, ui-sans-serif, system-ui);
  padding: var(--data-chart-p, 0);

  & * { box-sizing: border-box; }

  caption {
    display: none;
    font-size: var(--data-chart-caption-fs, 11px);
    font-weight: var(--data-chart-caption-fw, 500);
    grid-area: 1 / 1 / 2 / 2;
    text-wrap: nowrap;
  }

  table {
    display: grid;
    grid-template-rows: var(--_gtr, var(--data-chart-caption-h) 1fr);
    min-height: var(--data-chart-mih);
  }

  tbody {
    container-type: size;
    display: grid;
    gap: var(--data-chart-bar-gap, .25rem);
    grid-area: 2 / 1 / 4 / 2;
    grid-template-columns: repeat(auto-fit, minmax(var(--data-char.........完整代码请登录后点击上方下载按钮下载查看