d3实现柱状图图表效果代码-html代码-BFW代码库

d3实现柱状图图表效果代码

代码语言：html

所属分类：图表

代码描述：d3实现柱状图图表效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        .align {
          display: grid;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          justify-items: center;
          place-items: center;
        }
        
        /* layout/base.css */
        
        :root {
          --bodyFontFamily: 'Roboto', sans-serif;
          --bodyLineHeight: 1.5;
        }
        
        * {
          -webkit-box-sizing: inherit;
                  box-sizing: inherit;
        }
        
        html {
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
        }
        
        body {
          font-family: 'Roboto', sans-serif;
          font-family: var(--bodyFontFamily);
          line-height: 1.5;
          line-height: var(--bodyLineHeight);
          margin: 0;
          min-height: 100vh;
        }
        
        /* modules/chart.css */
        
        :root {
          --chartMarginBlockEnd: 1.5rem;
        
          --chartBarColor: #f32a64;
        
          --chartColumnColor: #e6edf4;
        
          --chartAxisColor: #e6edf4;
          --chartAxisFontSize: 0.625rem;
          --chartAxisStrokeWidth: 0.125rem;
        }
        
        .chart {
          margin-bottom: 1.5rem;
          margin-bottom: var(--chartMarginBlockEnd);
        }
        
        .chart__bar {
          fill: #f32a64;
          fill: var(--chartBarColor);
        }
        
        .chart__column {
          fill: #e6edf4;
          fill: var(--chartColumnColor);
        }
        
        .chart__axis {
          font-size: 0.625rem;
          font-size: var(--chartAxisFontSize);
        }
        
        .chart__axis path,
        .chart__axis line {
          fill: none;
          stroke: #e6edf4;
          stroke: var(--chartAxisColor);
          stroke-width: 0.125rem;
          stroke-width: var(--chartAxisStrokeWidth);
        }
        
        .chart__axis path {
          display: none;
        }
        
        /* modules/image.css */
        
        svg {
          height: auto;
          max-width: 100%;
          vertical-align: middle;
        }
    </style>
</head>

<body>


    <div>
        <h2 style="text-align:center;">Bar Chart</h2>
        <div class="chart chart--bar-chart js-bar-chart&q.........完整代码请登录后点击上方下载按钮下载查看