html 条形图 - SVG

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 条形图 - SVG相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>

<svg class="chart" width="250" height="200" fill="brown" >
  <rect x="0" y="0" width="50" height="25"></rect>
  <rect x="0" y="30" width="250" height="25"></rect>
  <rect x="0" y="60" width="150" height="25"></rect>
  <rect x="0" y="90" width="200" height="25"></rect>
  <rect x="0" y="120" width="100" height="25"></rect>
</svg>

以上是关于html 条形图 - SVG的主要内容，如果未能解决你的问题，请参考以下文章

与 Svg 垂直堆叠条形图反应（无第三方库）

条形图没有显示

为多个列表反应原生 svg 条形图；我怎样才能分开2条

减少 svg 图中条形之间的间隙

渐进式<；svg>；饼图、甜甜圈图、条形图和折线图

amcharts svg条形图上的值之间的动画转换