Question

我试图重新创建下面的图片。它应该是一个3D条形图，我将不得不提供动态数据，并确保条形上升到正确的百分比。忘记我可以使用纯色的阴影，但我希望能够在图表值发生变化时显示动画过渡。如你所见，条形垂直排列并与它们成一个角度，左侧会有一个内容为div。

我不知道从哪里开始！这个项目有什么好方法？我听说过关于D3.js的一些好事，但我想知道我能采取的CSS3方法是否更简单。有什么想法吗？

3D Bar Chart

Answer 1

我用javascript和canvas标签完成了这个，但是如果你不想使用D3.js，这是一个很棒的图形库，那么你可能想看看WebGL，或者在画布上模拟3D。 / p>

您还可以查看提供免费库的http://www.amcharts.com/demos/3d-column-chart/。

有关帮助您的有趣文章，您可以阅读：http://code.tutsplus.com/tutorials/create-an-animated-3d-bar-chartgraph--net-24831

对于CSS，您可以看一下： http://codepen.io/TimRuby/pen/ysfGe

<h1>Transparent CSS Only Bar Graph</h1>
  <div class="chart-container">
    <div class="base"></div>
        <!-- Left Side Meter-->
    <ul class="meter">
      <li><div>$100,000</div></li>
      <li><div>$80,000</div></li>
      <li><div>$60,000</div></li>
      <li><div>$40,000</div></li>
      <li><div>Less Than $20,000</div></li>
    </ul>
    <!-- Background-Grid -->
    <table>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <!-- End Background Grid -->

    <div class="bar one"></div>   
    <div class="bar two"></div>   
    <div class="bar three"></div>
    <div class="bar four"></div>   
    <div class="bar five"></div>   
    <div class="bar six"></div>
    <div class="bar seven"></div>   
    <div class="bar eight"></div> 
  </div>

html, body {
  background-color: #222;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  color: rgba(255,255,255,0.75);
}

h1 {
  margin: 60px auto 0;
  width: 550px;
  text-align: center;
  font-size: 36px;
}

.base {
  position: absolute;
  bottom: 0;
  left: -35px;
  width: 825px;
  height: 20px;
  background-color: rgba(255,255,255,0.05);
  -moz-transform: skew(45deg);
  -o-transform: skew(45deg);
  -webkit-transform: skew(45deg);
}

.chart-container {
  position: relative;
  z-index: 0;
  margin: 100px auto 0;
  width: 800px;
  height: 500px;
  /*border: solid 1px #bbb;*/
  background-color: rgba(255,255,255,0.055);
/*  -webkit-box-shadow: 0 8px 6px -6px #444;
*/}

.chart-container:after {
  content:"";
  position: absolute;
  top: -15px;
  left: -8px;
  height: 15px;
  width: 800px;
  background-color: rgba(255,255,255,0.055);
  -moz-transform: skew(45deg);
  -o-transform: skew(45deg);
  -webkit-transform: skew(45deg);
  transform: skew(45deg);
}

.chart-container > table {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -999;
  width: 100%;
  height: 100%;
}

.chart-container table  tr  td {
  width: 100px;
  height: 98x;
  border: solid 1px  rgba(255,255,255,0.05);

}

.meter {
  position: relative;
  top: 0px;
  left: -30px;
  height: 500px;
  width: 30px;
  background-color: rgba(20,113,163,0.5);
  border-left: solid 1px rgba(255,255,255,0.5);

}

.meter:before {
  content: "";
  position: absolute;
  top: -7px;
  left: -15px;
  width: 15px;
  height: 500px;
  background-color: rgba(14,81,117,0.9);
   -moz-transform: skewY(45deg);
  -o-transform: skewY(45deg);
  -webkit-transform: skewY(45deg);
  transform: skewY(45deg);
}

.meter:after {
  content: "";
  position: absolute;
  top: -15px;
  left: -8px;
  width: 30px;
  height: 15px;
  background-color: rgba(13,171,217,0.45);
   -moz-transform: skewX(45deg);
  -o-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
}

.meter li {
  position: relative;
  list-style-type: none;
  height: 99px;
  border-bottom: solid 1px #0DABD9;
}

.meter li:before {
  content: "";
  position: absolute;
  top: -15px;
  left: -30px;
  width: 30px;
  height: 100%;
  border-bottom: solid 1px #0DABD9;
  -moz-transform: skewY(45deg);
  -o-transform: skewY(45deg);
  -webkit-transform: skewY(45deg);
  transform: skewY(45deg);
}

.meter li:last-child {
  border-bottom: none;
}

.meter li:last-child:before {
  border: 0;
}

.meter li div {
  position: absolute;
  left: -115px;
  top: 0;
  padding: 55px 0 0;
  width: 80px;
  color: #656565;
  text-align: right;
  font-weight: 300;
  font-size: 14px;
  line-height: 18px;
  text-transform: uppercase;
}


/* ---------------------
  Vertical Bars
----------------------*/

.bar {
  float: left;
  position: absolute;
  bottom: 0;
  z-index: 99;
  height: 35%;
  width: 40px;
  margin: 0 40px;
  background-color: rgba(107,255,49,0.35);
}

.bar:before {
  content: "";
  position: absolute;
  left: -15px;
  bottom: 7px;
  height: 100%;
  width: 15px;
  background-color: rgba(107,255,49,0.25);
  -webkit-transform: skewY(45deg);
}

.bar:after {
  content: "";
  position: absolute;
  top: -15px;
  left: -8px;
  width: 40px;
  height: 15px;
  background-color: rgba(107,255,49,0.45);
  -moz-transform: skewX(45deg);
  -o-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
}

.two {
  left: 12.5%;
  height: 57%;
}

.three {
  left: 25%;
  height: 85%;
}

.four {
  left: 37.5%;
  height: 35%;
}

.five {
  left: 50%;
  height: 63%;
}

.six {
  left: 62.5%;
  height: 45%;
}

.seven {
  left: 75%;
  height: 15%;
}

.eight {
  left: 87.5%;
  height: 32%;
}

如果您可以显示一些代码，那么可以更轻松地帮助您确定需要做什么来获得所需的图表。

编辑：可以使用正常工作的3D示例here

Answer 2

以下是使用d3和x3dom http://bl.ocks.org/camio/5087116

的3D条形图示例

它至少可以让你开始。

如何创建3D条形图

2 个答案: