html - 我们可以用基本的 html 和 css 制作简单的条形图吗

标签 html css

enter image description here

我现在仅使用 html/css 完成了此操作。但问题是我使用了 position - relative 用于外部栏和 position absolute 用于内部元素的放置。但是随着文本变大/变小，定位不在中心(图表下方或上方的文本)

如果我不在元素上使用位置，图形下方的文本会浮在其上方或上方。图表上方显示的金额也成直线。

<div class="bar-container">
    <div class="fl width-100 r">
        <div class="donut-bg width-100 fl mr-c">
            <div class="bar" ng-repeat="d in barData track by $index" style="margin: 0 {{chartData.marginRight}}%">
                <div class="bar-value" style="bottom: {{+d.perc+20}}%">{{d.value}}K</div>
                <div class="bar-chart" style="height: {{d.perc}}%;"></div>
                <div class="bar-name c">d.text</div>
            </div>
        </div>
    </div>
</div>

barData = [{"value":33,"text":"AU","perc":"35.36","padPerc":"39.64"},{"value":0,"text":"BD","perc":"0.00","padPerc":"75.00"},{"value":0,"text":"DB","perc":"0.00","padPerc":"75.00"},{"value":11,"text":"ED","perc":"11.79","padPerc":"63.21"},{"value":70,"text":"EI","perc":"75.00","padPerc":"0.00"}]

最佳答案

我过去曾用 HTML、CSS 和 PHP 做过类似的事情——也许这会给你一个想法:

图表.css

#diagram 
 {
  position: relative;
  padding: 0;
  border: 1px solid #000;
  font-family: verdana;
  background: #fff;
 }


#diagram div.title 
 {
  padding: 0;
  position: relative;
  font: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 15px;
  top: 5px;
 }


#diagram  div.axis
 {
  padding: 0;
  position: absolute;
  top: 50px;
  left: 50px;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
 }


#diagram div.xunit
 {
  padding: 0;
  position: absolute;
  font-size: 8px;
  text-align: center;
  left: 50px;
  // border: 1px solid black;
 }

#diagram div.yunit
 {
  padding: 0;
  position: absolute;
  top: 25px;
  left: 25px;
  font-size: 8px;
  text-align: left;
  // border: 1px solid black;
 }


#diagram div.xlabels 
 {
  padding: 0;
  position: absolute;
  left: 50px;
  height: 25px;
  line-height: 25px;
  // border: 1px solid #000;
 }


#diagram div.xlabel 
 {
  position: absolute;
  left: 0;
  height: 25px;
  padding: 0;
  font-size: 8px;
  color: #c00;
  // border: 1px solid #000;
 }


#diagram div.ylabels 
 {
  padding: 0;
  position: absolute;
  top: 50px;
  left: 25px;
  width: 25px;
  // line-height: 25px;
  // border: 1px solid #000;
 }


#diagram div.ylabel 
 {
  position: absolute;
  left: 0;
  width: 25px;
  padding: 0;
  font-size: 8px;
  color: #c00;
  // border: 1px solid #000;
 }


#diagram div.bar
 {
  position: absolute;
  text-align: right;
  font-size: 10px;
  color: #fff;
  font-weight: bold;
  border: 1px solid #000;
  padding: 0px 0 0 0;
  background: #c00;
 }

diagram1.thtml

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="diagram.css">
  </head>
  <body>
    <div id="diagram" style="width: {DIAGRAMWIDTH}px; height: {DIAGRAMHEIGHT}px;">
      <div class="title">{DIAGRAMTITLE}
        <form id="diagramform" action="/diagram1.php" method="get">
          <input type="text" id ="startcell" name="startcell" value="{DIAGRAMSTARTCELL}" /> - <input type="text" id ="endcell" name="endcell" value="{DIAGRAMENDCELL}" />
          <!-- <button type="button" onclick="">&lt;</button> -->  <input type="text" id ="date" name="date" value="{DIAGRAMDATE}" />  <button type="button" onclick="var formdate = document.getElementById('date'); var nextdate = new Date(formdate.value); nextdate.setTime(nextdate.getTime() + 1000); formdate.value = nextdate.getFullYear() + '-' + (nextdate.getMonth() + 1) + '-' + nextdate.getDate() + ' ' + nextdate.getHours() + ':' + nextdate.getMinutes() + ':' + nextdate.getSeconds(); document.getElementById('diagramform').submit();">&gt;</button> 
          <input type="submit"  style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1" />
        </form>
      </div>
      <div class="axis" style="width: {AXISWIDTH}px; height: {AXISHEIGHT}px;">
        <div class="bar">
          <!-- BEGIN XBAR_POS -->
          <div class="bar" style="width: {XBAR_WIDTH}px; left: {XBAR_LEFT}px; top: {XBAR_TOP}px; height: {XBAR_HEIGHT}px;"></div>
          <!-- END XBAR_POS -->
        </div>
      </div>
      <div class="xunit" style="top: {XLABEL_TOP}px; width: {XLABEL_WIDTH}px;">{XLABEL}</div>
      <div class="yunit" style="height: {YLABEL_HEIGHT}px;">{YLABEL}</div>
      <div class="xlabels" style="top: {XLABELS_TOP}px; width: {XLABELS_WIDTH}px;">
        <!-- BEGIN XLABEL_POS -->
        <div class="xlabel" style="left: {XLABEL_VALUE_LEFT}px;">{XLABEL_VALUE}</div>
        <!-- END XLABEL_POS -->
      </div>
      <div class="ylabels" style="height: {YLABELS_HEIGHT}px;">
        <!-- BEGIN YLABEL_POS -->
        <div class="ylabel" style="top: {YLABEL_VALUE_TOP}px;">{YLABEL_VALUE}</div>
        <!-- END YLABEL_POS -->
      </div>
    </div>
    <hr />
    <a href="diagram1.php">Zellenübersicht</a> | <a href="diagram2.php">Zeitübersicht</a> | <a href="data.php">Datenübermittlung</a>
  </body>
</html>

diagram1.php

<?php
require_once('HTML/Template/PHPLIB.php');
require_once('config.php');

$diagramdate = htmlspecialchars(@$_GET["date"]);
if (empty($diagramdate))
 {
  $diagramdate = date("Y-m-d");
 }
$lasttimestamp = $diagramdate;
$diagramstartcell = htmlspecialchars(@$_GET["startcell"]);
if (empty($diagramstartcell))
 {
  $diagramstartcell = 1;
 }
$diagramendcell = htmlspecialchars(@$_GET["endcell"]);
if (empty($diagramendcell))
 {
  $diagramendcell = 12;
 }

$diagramwidth = 1000;
$diagramheight = 500;
$diagramtitle = 'Zellenübersicht';

$xlabels = array();
$mysqli = mysqli_connect($dbhost, $dbuser, $dbpasswd, $dbschema);
if ($mysqli->connect_errno) 
 {
  printf("Connect failed: %s\n", $mysqli->connect_error);
  exit();
 }
$res = mysqli_query($mysqli, "select cell_id, cv_volt, cv_time from cell_voltages where cell_id >= " . $diagramstartcell . " and cell_id <= " . $diagramendcell . " and cv_time >= '" . $diagramdate . "' order by cv_time, cell_id"); // TODO prevent sql injection, use prepared statement
if ($res)
 {
  while ($row = $res->fetch_assoc()) 
   {
    if (isset($xlabels[$row['cell_id']]))
     {
      break;
     }
    $xlabels[$row['cell_id']] = $row['cv_volt'];
    $lasttimestamp = $row['cv_time'];
   }
  $res->free();
 }
$mysqli->close();

$ylabels = array(4.2, 4.0, 3.5, 3.0, 2.5, 2.0, 1.7);

// ----------

$axiswidth = $diagramwidth - 100;
$axisheight = $diagramheight - 100;

$xlabel_top = $diagramheight - 25;
$xlabel_width = $axiswidth;
$xlabel = 'Zellen';

$xlabels_top = $diagramheight - 50;
$xlabels_width = $axiswidth;

$ylabel_height = $axisheight + 25;
$ylabel = 'V';

$ylabels_height = $axisheight;

header('Content-Type: text/html; charset=utf-8');

$t = new HTML_Template_PHPLIB(dirname(__FILE__), 'keep');
$t->setFile('diagram', 'diagram1.thtml');
$t->setVar('DIAGRAMWIDTH', $diagramwidth);
$t->setVar('DIAGRAMHEIGHT', $diagramheight);
$t->setVar('DIAGRAMTITLE', $diagramtitle);
$t->setVar('DIAGRAMDATE', $lasttimestamp);
$t->setVar('DIAGRAMSTARTCELL', $diagramstartcell);
$t->setVar('DIAGRAMENDCELL', $diagramendcell);

$t->setVar('AXISWIDTH', $axiswidth);
$t->setVar('AXISHEIGHT', $axisheight);

$t->setVar('XLABEL_TOP', $xlabel_top);
$t->setVar('XLABEL_WIDTH', $xlabel_width);
$t->setVar('XLABEL', $xlabel);

$t->setVar('XLABELS_TOP', $xlabels_top);
$t->setVar('XLABELS_WIDTH', $xlabels_width);


$t->setVar('YLABEL_HEIGHT', $ylabel_height);
$t->setVar('YLABEL', $ylabel);

$t->setVar('YLABELS_HEIGHT', $ylabels_height);

$t->setBlock('diagram', 'XLABEL_POS', 'XLABEL_POS_ref');
if (count($xlabels) > 0)
 {
  $xpixelscale = $axiswidth / count($xlabels);
 }
else
 {
  $xpixelscale = 1;
 }
$i = 0;
foreach($xlabels as $xkey => $xvalue)
 {
  $t->setVar('XLABEL_VALUE', $xkey);
  $t->setVar('XLABEL_VALUE_LEFT', ($xpixelscale * $i++) + ($xpixelscale / 2));
  $t->parse('XLABEL_POS_ref', 'XLABEL_POS', true);
 }
if ($i == 0)
 {
  $t->setVar('XLABEL_VALUE', '');
  $t->setVar('XLABEL_VALUE_LEFT', 0);
  $t->parse('XLABEL_POS_ref', 'XLABEL_POS', false);
 }

$t->setBlock('diagram', 'YLABEL_POS', 'YLABEL_POS_ref');
$topvalue = reset($ylabels);
$bottomvalue = end($ylabels);
$ypixelscale = $axisheight / ($topvalue - $bottomvalue);
foreach($ylabels as $yvalue)
 {
  $t->setVar('YLABEL_VALUE', $yvalue);
  $t->setVar('YLABEL_VALUE_TOP', $axisheight - (($yvalue - $bottomvalue) * $ypixelscale));
  $t->parse('YLABEL_POS_ref', 'YLABEL_POS', true);
 }

$t->setBlock('diagram', 'XBAR_POS', 'XBAR_POS_ref');
$i = 0;
foreach($xlabels as $xkey => $xvalue)
 {
  if ($xvalue - $bottomvalue >= 0)
   {
    $t->setVar('XBAR_WIDTH', $xpixelscale / 2);
    $t->setVar('XBAR_LEFT', ($xpixelscale * $i) + ($xpixelscale / 4));
    $t->setVar('XBAR_HEIGHT', ($xvalue - $bottomvalue) * $ypixelscale);
    $t->setVar('XBAR_TOP', $axisheight - (($xvalue - $bottomvalue) * $ypixelscale));
    $t->parse('XBAR_POS_ref', 'XBAR_POS', true);
   }
  ++$i;
 }
if ($i == 0)
 {
  $t->setVar('XBAR_WIDTH', '0');
  $t->setVar('XBAR_LEFT', '0');
  $t->setVar('XBAR_HEIGHT', '0');
  $t->setVar('XBAR_TOP', '0');
  $t->parse('XBAR_POS_ref', 'XBAR_POS', false);
 }

echo $t->finish($t->parse('OUT', 'diagram'));
?>

config.php 已被省略，TemplateEngine 是来自PHPLib 的Pear 版本。 .抱歉没有时间创建屏幕截图。

关于html - 我们可以用基本的 html 和 css 制作简单的条形图吗，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47050001/

上一篇：javascript - 自定义 cpanel 登录表单

下一篇：javascript - 单击导航上的某些链接后，侧边栏导航停止工作

相关文章：

html - 所有浏览器的嵌套导航菜单悬停问题

HTML 表格列宽 : combining fixed and variable widths

css - Bootstrap 2 列中心标题

javascript - 在 Javascript 中隐藏下拉菜单中的对象

javascript - 使用 textangular 在内容可编辑的 div 中记录和恢复插入符号的位置

javascript - 使用 jquery 操作选择框

php - 为什么链接的顶部和底部有空白？

html - 如何减小文本区域缩进的大小？

php - ckeditor 和 cakephp - 我不能使文本区域更大 - 我做错了什么

javascript - 自动弹出移动导航的 Jquery 菜单

©2024 IT工具网  联系我们