douzhao7634
douzhao7634
2018-07-16 19:17
浏览 272
已采纳

带有highcharts(100%高度)的全屏面板引导程序

I have several (bootstrap) panels where I would like to have the opportunity to show this fullscreen. Highcharts charts are present in these panels. The problem is that the height of the highcharts does not adapt when you are going in full screen mode, as is the case with the width. Is there a possibility to automatically adjust the scaling so that the ratio remains the same?

if this is not possible, I would like to have the graph aligned in the middle of the height.

JSFIDDLE

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-md-6 col-xs-6">
      <h2>Fullscreen toggle</h2>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel title</h3>
          <ul class="list-inline panel-actions">
            <li><a href="#" id="panel-fullscreen" class='fullscreen-btn' role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
          </ul>
        </div>
        <div class="panel-body">
          <div class="col-lg-8 col-md-8 col-xs-8">
            <div id="container"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-xs-4">
            <h6>Lorem ipsum dolor sit amet, et sit eros molestiae aliquando, habemus intellegat ut vix. Mea prima vituperata at, his enim dicat verterem cu. Vis vivendo consulatu adversarium in, quo cu iisque percipitur. Ne vix apeirian menandri sensibus,
              ea eos probo libris efficiendi, sed no elit etiam scripta. Has an justo semper impedit, diam epicurei percipitur at sed.</h6>
          </div>
        </div>
      </div>
    </div>


    <div class="col-lg-6 col-md-6 col-xs-6">
      <h2>Fullscreen toggle</h2>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel title</h3>
          <ul class="list-inline panel-actions">
            <li><a href="#" id="panel-fullscreen2" class='fullscreen-btn' role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
          </ul>
        </div>
        <div class="panel-body">
          <div class="col-lg-8 col-md-8 col-xs-8">
            <div id="container2"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-xs-4">
            <h6>Lorem ipsum dolor sit amet, et sit eros molestiae aliquando, habemus intellegat ut vix. Mea prima vituperata at, his enim dicat verterem cu. Vis vivendo consulatu adversarium in, quo cu iisque percipitur. Ne vix apeirian menandri sensibus,
              ea eos probo libris efficiendi, sed no elit etiam scripta. Has an justo semper impedit, diam epicurei percipitur at sed.</h6>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

JS

$(document).ready(function() {
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'
        }
      }
    }]
  };
  Highcharts.chart(chartInfo.containerId, chartInfo.definition);
}
//Toggle fullscreen
$(".fullscreen-btn").click(function(e) {
  e.preventDefault();

  var $this = $(this);
  $this.children('i')
    .toggleClass('glyphicon-resize-full')
    .toggleClass('glyphicon-resize-small');
  $(this).closest('.panel').toggleClass('panel-fullscreen');
  var chartInfo = $this.attr("id") === 'panel-fullscreen' ? chart1Info : chart2Info;
  console.log($this.id, chartInfo);
  drawChart(chartInfo);
});
drawChart(chart1Info);
drawChart(chart2Info);
});

CSS

.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;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
}

Hopefully someone can help me to solve this problem. Thank you in advance!!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • duanliaozhi2915
    duanliaozhi2915 2018-07-17 11:42
    已采纳

    As you can read in Highcharts documentation:

    By default (when null) the height is calculated from the offset height of the containing element, or 400 pixels if the containing element's height is 0.

    So, if you didn't specify the width value on parent element, then your chart has taken the 400px value and set it by default.

    In order to make it fits as expected, you need to define any CSS height values on all containing elements. For example:

    .col-lg-8.col-md-8.col-xs-8 {
      height: 100%
    }
    .panel-body {
     height: 94%
    }
    #container,
    #container2 {
      height: 100%
    }
    

    Live example: https://jsfiddle.net/jx46s9gn/

    API Reference: https://api.highcharts.com/highcharts/chart.height

    点赞 评论

相关推荐