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-chart-bar-miw, 1.25cqi), 1fr));

    td {
      --_v: attr(data-v type(<number>), 0);
      --_pv: attr(data-pv type(<number>), var(--_v));
      --_y: calc(1 - ((var(--_v) - var(--_min)) / (var(--_max) - var(--_min))));
      --_py: calc(1 - ((var(--_pv) - var(--_min)) / (var(--_max) - var(--_min))));

      background: var(--data-chart-bar-bg, var(--_bg, light-dark(hsla(210, 100%, 70%, .8), hsla(210, 60%, 60%, .8))));
      color: #0000;
      font-size: var(--data-chart-bar-fs, clamp(0.5625rem, 0.45rem + .5cqi, 0.75rem));
      font-weight: var(--data-chart-bar-fw, 400);
      height: calc(((var(--_v) - var(--_min)) / (var(--_max) - var(--_min))) * 100cqb);
      padding: var(--data-chart-bar-p, .75ch 0 0 0);
      text-align: center;

      &:first-of-type {
        border-radius: var(--data-chart-bar-bdrs) var(--data-chart-bar-bdrs) 0 0;
      }
    }

    th {
      border-block-start: var(--data-chart-x-axis-bdw, 0px) var(--data-chart-x-axis-bds, solid) var(--data-chart-x-axis-bdc, hsla(0, 0%, 41%, .95));
      color: var(--data-chart-x-axis-c, light-dark(#444, #EEE));
      display: none;
      font-size: var(--data-chart-x-axis-fs, clamp(0.5625rem, 0.4rem + .5cqi, 0.6875rem));
      font-weight: var(--data-chart-x-axis-fw, 400);
      grid-row: calc(var(--_c, 1) + 1);
      height: var(--data-chart-label-h);
      overflow-inline: clip;
      padding: var(--data-chart-x-axis-p, 0);
      place-content: c.........完整代码请登录后点击上方下载按钮下载查看