带高图的全屏引导卡（高度为100％）

Question

我有几张（bootstrap）卡，希望有机会在全屏显示。这些卡片中包含高图图表。问题在于，当您进入全屏模式时，高图的高度无法适应。

前一段时间，我对引导面板提出了同样的问题，然后“ daniel_s”为面板制作了this示例。直到现在，我在底部添加了许多列，并且已将其从面板转换为卡片。不幸的是，该示例不再起作用。

是否可以自动调整高图的比例，以使比率（底部和标题的列）保持与this示例中的比例相同？

此外，我还想知道如何在一行中获得标题文本和图标。这样，文本在左侧，图标在右侧。

HTML

$(document).ready(function() {
  var charts = [];
  var chart1Info = {
    containerId: 'container',
    definition: {
      title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
      },
      subtitle: {
        text: 'Source: thesolarfoundation.com'
      },
      yAxis: {
        title: {
          text: 'Number of Employees'
        }
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
      },
      plotOptions: {
        series: {
          label: {
            connectorAllowed: false
          },
          pointStart: 2010
        }
      },
      series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
      }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
      }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
      }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
      }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
      }]
    }
  };
  var chart2Info = {
    containerId: 'container2',
    definition: {
      title: {
        text: 'Chart2 Title'
      },
      subtitle: {
        text: 'Source: thesolarfoundation.com'
      },
      yAxis: {
        title: {
          text: 'Number of Employees'
        }
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
      },
      plotOptions: {
        series: {
          label: {
            connectorAllowed: false
          },
          pointStart: 2010
        }
      },
      series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
      }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
      }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
      }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
      }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
      }]
    }
  };

  function drawChart(chartInfo) {
    // Properties that vary by chart should be defined in chartInfo
    // Any properties that are the same for all charts are added here 
    chartInfo.responsive = {
      rules: [{
        condition: {
          maxWidth: 500
        },
        chartOptions: {
          legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom'
          }
        }
      }]
    };

    if (chartInfo == chart1Info) {
      charts[0] = Highcharts.chart(chartInfo.containerId, chartInfo.definition);
    } else {
      charts[1] = Highcharts.chart(chartInfo.containerId, chartInfo.definition);
    }

  }
  //Toggle fullscreen
  $(".fullscreen-btn").click(function(e) {
    e.preventDefault();

    var $this = $(this);
    $this.children('i')
      .toggleClass('fa-expand')
      .toggleClass('fa-arrows-alt');
    console.log($(this).closest('.card'))
    $(this).closest('.card').toggleClass('panel-fullscreen');
    var chartInfo = $this.attr("id") === 'panel-fullscreen' ? chart1Info : chart2Info;
    console.log($this.id, chartInfo);
    drawChart(chartInfo);
  });

  drawChart(chart1Info);
  drawChart(chart2Info);



  // Export buttons
  $('#png').click(function() {
    charts[0].exportChart();
  });

  $('#jpeg').click(function() {
    charts[0].exportChart({
      type: 'jpeg',
      filename: 'my-pdf'
    });
  });

  $('#pdf').click(function() {
    charts[0].exportChart({
      type: 'pdf',
      filename: 'my-pdf'
    });
  });

  $('#svg').click(function() {
    charts[0].exportChart({
      type: 'SVG',
      filename: 'my-svg'
    });
  });

  document.getElementById('csv').onclick = () => {
    charts[0].downloadCSV()
  };

  document.getElementById('xls').onclick = () => {
    charts[0].downloadXLS()
  }

  $('#print').click(function() {
    charts[0].print();
  });


  $('#png2').click(function() {
    charts[1].exportChart();
  });

  $('#jpeg2').click(function() {
    charts[1].exportChart({
      type: 'jpeg',
      filename: 'my-pdf'
    });
  });

  $('#pdf2').click(function() {
    charts[1].exportChart({
      type: 'pdf',
      filename: 'my-pdf'
    });
  });

  $('#svg2').click(function() {
    charts[1].exportChart({
      type: 'SVG',
      filename: 'my-svg'
    });
  });

  document.getElementById('csv2').onclick = () => {
    charts[1].downloadCSV()
  };

  document.getElementById('xls2').onclick = () => {
    charts[1].downloadXLS()
  }

  $('#print2').click(function() {
    charts[1].print();
  });
});

.panel-actions {
  margin-top: -20px;
  margin-bottom: 0;
  text-align: right;
}

.panel-actions a {
  color: #333;
}

.panel-fullscreen {
  display: block;
  z-index: 9999;
  position: fixed !important;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
}

.card_border {
  border: solid 0.75px #fa7921;
}

.card_border2 {
  border: solid 2px #fa7921;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-3">
      <div class="card with-margin card_shadow card_border rounded">
        <div class="container-fluid">
          <div class="row border-bottom-0 card_border2" style="background: linear-gradient(to right, #eea849, #fa7921);">
            <h3>Panel title
              <ul class="list-inline panel-actions float-right">
                <li class="list-inline-item"><a href="#" id="panel-fullscreen" class="fullscreen-btn" role="button" title="Toggle fullscreen"><i class="fas fa-expand"></i></a></li>
                <div class="btn-group">
                  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="fas fa-list-ul"></span></button>
                  <ul class="dropdown-menu">
                    <li class="dropdown-item"><a href="#" id="print">Print</a></li>
                    <li role="separator" class="divider dropdown-item"></li>
                    <li class="dropdown-item"><a href="#" id="png">Download PNG</a></li>
                    <li class="dropdown-item"><a href="#" id="jpeg">Download JPEG</a></li>
                    <li class="dropdown-item"><a href="#" id="pdf">Download PDF</a></li>
                    <li class="dropdown-item"><a href="#" id="svg">Download SVG</a></li>
                    <li role="separator" class="divider dropdown-item"></li>
                    <li class="dropdown-item"><a href="#" id="csv">Download CSV</a></li>
                    <li class="dropdown-item"><a href="#" id="xls">Download XLS</a></li>
                  </ul>
                </div>
              </ul>
            </h3>
          </div>
          <div class="row">
            <div class="card-body border-top-0 border-bottom-0 card_border2">
              <div id="container"></div>
            </div>
          </div>
          <div class="row bg-white justify-content-center card_border">
            <div class="col-sm text-center card_border2">
              <br> Saves
              <p class="h4">1700000</p>
              <p class="text-danger margin h6">-2.1%</p>
            </div>
            <div class="col-sm text-center card_border2">
              <br> Likes
              <h4>1700000</h4>
              <p class="text-success margin">2.1%</p>
            </div>
            <div class="col-sm text-center card_border2">
              <br> Likes
              <h4>1700000</h4>
              <p class="text-success margin">2.1%</p>
            </div>
            <div class="col-sm text-center card_border2">
              <br> Likes
              <h4>1700000</h4>
              <p class="text-success margin">2.1%</p>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="col-md-6 col-lg-3">
      <div class="card with-margin card_shadow card_border rounded">
        <div class="container-fluid">
          <div class="row border-bottom-0 card_border2" style="background: linear-gradient(to right, #eea849, #fa7921);">
            <h3>Panel title
              <ul class="list-inline panel-actions float-right">
                <li class="list-inline-item"><a href="#" id="panel-fullscreen2" class="fullscreen-btn" role="button" title="Toggle fullscreen"><i class="fas fa-expand"></i></a></li>
                <div class="btn-group">
                  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="fas fa-list-ul"></span></button>
                  <ul class="dropdown-menu">
                    <li class="dropdown-item"><a href="#" id="print2">Print</a></li>
                    <li role="separator" class="divider dropdown-item"></li>
                    <li class="dropdown-item"><a href="#" id="png2">Download PNG</a></li>
                    <li class="dropdown-item"><a href="#" id="jpeg2">Download JPEG</a></li>
                    <li class="dropdown-item"><a href="#" id="pdf2">Download PDF</a></li>
                    <li class="dropdown-item"><a href="#" id="svg2">Download SVG</a></li>
                    <li role="separator" class="divider dropdown-item"></li>
                    <li class="dropdown-item"><a href="#" id="csv2">Download CSV</a></li>
                    <li class="dropdown-item"><a href="#" id="xls2">Download XLS</a></li>
                  </ul>
                </div>
              </ul>
            </h3>
          </div>
          <div class="row">
            <div class="card-body border-top-0 border-bottom-0 card_border2">
              <div id="container2"></div>
            </div>
          </div>
          <div class="row bg-white justify-content-center card_border">
            <div class="col-sm text-center card_border2">
              <br> Saves
              <p class="h4">1700000</p>
              <p class="text-danger margin h6">-2.1%</p>
            </div>
            <div class="col-sm text-center card_border2">
              <br> Likes
              <h4>1700000</h4>
              <p class="text-success margin">2.1%</p>
            </div>
            <div class="col-sm text-center card_border2">
              <br> Likes
              <h4>1700000</h4>
              <p class="text-success margin">2.1%</p>
            </div>
            <div class="col-sm text-center card_border2">
              <br> Likes
              <h4>1700000</h4>
              <p class="text-success margin">2.1%</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

希望有人可以帮助我解决这个问题。预先谢谢你！

Answer 1

让我们从一个简单的问题开始，即一个问题：

  

此外，我还想知道如何在一行中获得标题文本和图标。这样，文本在左侧，图标在右侧。

由于flex容器不支持float属性，您的浮动无法正常工作，因此，根据需要放置它，请在父元素上设置justify-content: space-between。

关于高度问题，请尝试在图表配置对象中设置chart.height: '100%'，让我知道它已解决了问题。

        <div class="container-fluid">
            <div class="row border-bottom-0 card_border2" style="background: linear-gradient(to right, #eea849, #fa7921); justify-content: space-between">
            <h3>Panel title</h3>
            <ul class="list-inline panel-actions">
                <li class="list-inline-item"><a href="#" id="panel-fullscreen" class="fullscreen-btn" role="button" title="Toggle fullscreen"><i class="fas fa-expand"></i></a></li>
                <div class="btn-group">
                    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="fas fa-list-ul"></span></button>
                    <ul class="dropdown-menu">
                        <li class="dropdown-item"><a href="#" id="print">Print</a></li>
                        <li role="separator" class="divider dropdown-item"></li>
                        <li class="dropdown-item"><a href="#" id="png">Download PNG</a></li>
                        <li class="dropdown-item"><a href="#" id="jpeg">Download JPEG</a></li>
                        <li class="dropdown-item"><a href="#" id="pdf">Download PDF</a></li>
                        <li class="dropdown-item"><a href="#" id="svg">Download SVG</a></li>
                        <li role="separator" class="divider dropdown-item"></li>
                        <li class="dropdown-item"><a href="#" id="csv">Download CSV</a></li>
                        <li class="dropdown-item"><a href="#" id="xls">Download XLS</a></li>
                    </ul>
                </div>
            </ul>

            </div>
       </div>

图表配置：

var chart1Info = {
containerId: 'container',
definition: {
    chart: {
     height: '100%'
  },
  title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
  },
  subtitle: {
    text: 'Source: thesolarfoundation.com'
  },
  yAxis: {
    title: {
      text: 'Number of Employees'
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },
  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },
  series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  }, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  }, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
  }, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
  }]
 }
};

实时示例：http://jsfiddle.net/hnLr14o5/

[编辑]

在下面的评论中进行了交谈之后，您需要将两个容器的height属性值设置为100%，然后从图表配置中删除此属性。另外，请同时从两个style="height: 220px"元素中删除.card-body属性，而不是-定义一个名为（例如）.row-200的新类，该类将height设置为{{ 1}}，并将其最初分配给这两个元素。

最后，您可以通过以下代码行在按钮单击事件上切换创建的类：

200px

这里是示例：http://jsfiddle.net/kdv3sy85/

亲切的问候！