Question

我只是在一些div中添加一些图表。当我使用.append（）添加图例时，所有其他div都位于不同的高度。我究竟做错了什么？我需要做什么才能让他们坐在同一个高度？

当我将图例添加到圆环图时会出现问题。

我对我正在做的事情做了这个小提琴：https://jsfiddle.net/3oxo8ee9/

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body { position: absolute;}
.dataPic {
    display: inline-block;
    position: relative;
    border: 1px solid black;
    height: 700px;
}
.dataPic > div{
    margin-top: 5px
}
.doughnut-legend li{
    display: inline-block;
}
.doughnut-legend span{
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
}
</style>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="dataPic">
        <canvas id="radar1" height="400" width="400"></canvas>
    </div>
    <div class="dataPic">
        <canvas id="bar1" height="400" width="400"></canvas>
    </div>
    <div class="dataPic doughnutDiv">
        <canvas id="doughnut1" height="400" width="400"></canvas>
    </div>



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/ChartJs/Chart.min.js"></script>
    <script>

        function createRadarChart(id, radarChartData) {
            window.myRadar = new Chart(document.getElementById(id).getContext(
                    "2d")).Radar(radarChartData, {
                responsive : false
            });
        }
        function createBarChart(id, barChartData){
            var ctx = document.getElementById(id).getContext("2d");
            window.myBar = new Chart(ctx).Bar(barChartData, {
                responsive : false
            });
        }
        function createDoughnut(id, doughnutChartData){
            var ctx = document.getElementById(id).getContext("2d");
            window.myDoughnut = new Chart(ctx).Doughnut(doughnutChartData, {responsive : false});
            //$('.doughnutDiv').append(window.myDoughnut.generateLegend());
        }
        window.onload = function() {
            var radarChartData1 = {
                labels : [ "Eating", "Drinking", "Sleeping", "Designing", "Coding",
                        "Cycling", "Running" ],
                datasets : [ {
                    label : "My First dataset",
                    fillColor : "rgba(220,220,220,0.2)",
                    strokeColor : "rgba(220,220,220,1)",
                    pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",
                    pointHighlightFill : "#fff",
                    pointHighlightStroke : "rgba(220,220,220,1)",
                    data : [ 65, 59, 90, 81, 56, 55, 40 ]
                }, {
                    label : "My Second dataset",
                    fillColor : "rgba(151,187,205,0.2)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    pointHighlightFill : "#fff",
                    pointHighlightStroke : "rgba(151,187,205,1)",
                    data : [ 28, 48, 40, 19, 96, 27, 100 ]
                } ]
            };
            createRadarChart("radar1", radarChartData1)

            var barChartData = {
                labels : ["January","February","March","April","May","June","July"],
                datasets : [
                    {
                        fillColor : "rgba(220,220,220,0.5)",
                        strokeColor : "rgba(220,220,220,0.8)",
                        highlightFill: "rgba(220,220,220,0.75)",
                        highlightStroke: "rgba(220,220,220,1)",
                        data : [80,80,80,80,80,80,80]
                    },
                    {
                        fillColor : "rgba(151,187,205,0.5)",
                        strokeColor : "rgba(151,187,205,0.8)",
                        highlightFill : "rgba(151,187,205,0.75)",
                        highlightStroke : "rgba(151,187,205,1)",
                        data : [50,50,50,50,50,50,50]
                    }
                ]

            }
            createBarChart("bar1", barChartData)
            var doughnutData = [
                    {
                        value: 300,
                        color:"#F7464A",
                        highlight: "#FF5A5E",
                        label: "Red"
                    },
                    {
                        value: 50,
                        color: "#46BFBD",
                        highlight: "#5AD3D1",
                        label: "Green"
                    },
                    {
                        value: 100,
                        color: "#FDB45C",
                        highlight: "#FFC870",
                        label: "Yellow"
                    },
                    {
                        value: 40,
                        color: "#949FB1",
                        highlight: "#A8B3C5",
                        label: "Grey"
                    },
                    {
                        value: 120,
                        color: "#4D5360",
                        highlight: "#616774",
                        label: "Dark Grey"
                    }

            ];
            createDoughnut("doughnut1", doughnutData);
        }
    </script>

</body>
</html>

Answer 1

答案结果是给出了违规的元素，在这种情况下.dataPic规则：

vertical-align: middle;

当我将这个ul添加到div时，它们之前的div位于较低位置。我怎样才能让他们坐在同一个高度

1 个答案: