我有3个图表。我希望第三张图表位于中心,但与图表的左侧对齐

现在的图表是这样的:
 

图片在左侧对齐,我希望图表变得像这样:


我希望图像像这样对齐,这是一段代码:

<!doctype html>
<html>

<head>
    <title>Adaptive size</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
        body {
            padding: 30px;
            margin: 0px;

        }

        .clear:before,
        .clear:after {
            content: "";
            display: table;
        }

        .clear:after {
            clear: both;
        }

        .clear {
            *zoom: 1;

        }

        .gauge {
            display: block;
            float: Left;
            border: 1px solid #ddd;
            box-sizing: border-box;
            margin: 2% 2% 5% 13%;



        .size-1 {
            width: 30%;
        }

        .size-2 {
            width: 30%;
        }
        }
         .size-3 {
            width: 40%;

        }


        .h-split {
            display: block;
            float: left;
            width: 0%;
            min-height: 0px;
        }

    </style>
</head>

<body>
    <div id="jg1" class="gauge size-1"></div>
    <div class="h-split"></div>
    <div id="jg2" class="gauge size-2"></div>
    <div class="h-split"></div>
    <div id="jg3" class="gauge size-3"></div>
    <div class="h-split"></div>
    <div class="clear"></div>
    <script src="../raphael-2.1.4.min.js"></script>
    <script src="../justgage.js"></script>
    <script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var jg1, jg2, jg3;

        var defs1 = {
            label: "Weight Left",

            value: 65.56,
            min: 0,
            max: 200,
            decimals: 3,
            gaugeWidthScale: 0.6,
            pointer: true,
            pointerOptions: {
                toplength: 10,
                bottomlength: 10,
                bottomwidth: 2
            },
            counter: true,
            relativeGaugeSize: true
        }
          var defs2 = {
            label: "Weight Right",
            value: 65,
            min: 0,
            max: 200,
            decimals: 3,
            gaugeWidthScale: 0.6,
            pointer: true,
            pointerOptions: {
                toplength: 10,
                bottomlength: 10,
                bottomwidth: 2
            },
            counter: true,
            relativeGaugeSize: true
        }

          var defs3 = {
            label: "Total Weight",
            value: 65,
            min: 0,
            max: 200,
            decimals: 3,
            gaugeWidthScale: 0.6,
            pointer: true,
            pointerOptions: {
                toplength: 10,
                bottomlength: 10,
                bottomwidth: 2

            },
            counter: true,
            relativeGaugeSize: true
        }



        jg1 = new JustGage({
            id: "jg1",
            defaults: defs1
        });

        jg2 = new JustGage({
            id: "jg2",
            defaults: defs2
        });

        jg3 = new JustGage({
            id: "jg3",
            defaults: defs3

        });

    });
    </script>
</body>

</html>


我如何像第二张图片一样对齐图表?

最佳答案

这样就可以了。

我从size-3移除了浮子,并确保清除前两个压力表。然后将margin: 0 auto;添加到size-3类以使其居中。



document.addEventListener("DOMContentLoaded", function(event) {
  var jg1, jg2, jg3;

  var defs1 = {
    label: "Weight Left",

    value: 65.56,
    min: 0,
    max: 200,
    decimals: 3,
    gaugeWidthScale: 0.6,
    pointer: true,
    pointerOptions: {
      toplength: 10,
      bottomlength: 10,
      bottomwidth: 2
    },
    counter: true,
    relativeGaugeSize: true
  }
  var defs2 = {
    label: "Weight Right",
    value: 65,
    min: 0,
    max: 200,
    decimals: 3,
    gaugeWidthScale: 0.6,
    pointer: true,
    pointerOptions: {
      toplength: 10,
      bottomlength: 10,
      bottomwidth: 2
    },
    counter: true,
    relativeGaugeSize: true
  }

  var defs3 = {
    label: "Total Weight",
    value: 65,
    min: 0,
    max: 200,
    decimals: 3,
    gaugeWidthScale: 0.6,
    pointer: true,
    pointerOptions: {
      toplength: 10,
      bottomlength: 10,
      bottomwidth: 2

    },
    counter: true,
    relativeGaugeSize: true
  }



  jg1 = new JustGage({
    id: "jg1",
    defaults: defs1
  });

  jg2 = new JustGage({
    id: "jg2",
    defaults: defs2
  });

  jg3 = new JustGage({
    id: "jg3",
    defaults: defs3

  });

});

body {
  padding: 30px;
  margin: 0px;

}

.clear:before,
.clear:after {
  content: "";
  display: table;
}

.clear:after {
  clear: both;
}

.clear {
  *zoom: 1;

}

.gauge {
  display: block;
  float: Left;
  border: 1px solid #ddd;
  box-sizing: border-box;
  margin: 2% 2% 5% 13%;
}



.size-1 {
  width: 30%;
}

.size-2 {
  width: 30%;
}

.size-3 {
  width: 40%;
  margin: 0 auto;
  float: none;

}


.h-split {
  display: block;
  float: left;
  width: 0%;
  min-height: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.9/justgage.min.js"></script>

<div id="jg1" class="gauge size-1"></div>
<div class="h-split"></div>
<div id="jg2" class="gauge size-2"></div>
<div class="h-split"></div>
<div class="clear"></div>
<div id="jg3" class="gauge size-3"></div>
<div class="h-split"></div>
<div class="clear"></div>

关于javascript - 如何对齐3个不同的图表?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53423711/

10-12 12:38
查看更多