如何调整Morris图表的大小？

Question

// Left Sidebar Toggle Menu JS
$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
  $(window).trigger('resize');
});


//Morris Charts
jQuery.ready()
var data = [
  { y: '2014', a: 50, b: 90},
  { y: '2015', a: 65,  b: 75},
  { y: '2016', a: 55,  b: 50},
  { y: '2017', a: 75,  b: 60},
  { y: '2018', a: 80,  b: 65},
  { y: '2019', a: 90,  b: 70},
  { y: '2020', a: 100, b: 75},
  { y: '2021', a: 115, b: 75},
  { y: '2022', a: 120, b: 85},
  { y: '2023', a: 145, b: 85},
  { y: '2024', a: 160, b: 95}
],
    config = {
      data: data,
      xkey: 'y',
      ykeys: ['a', 'b'],
      labels: ['Total Income', 'Total Outcome'],
      fillOpacity: 0.6,
      hideHover: 'auto',
      behaveLikeLine: true,
      resize: true,
      pointFillColors:['#ffffff'],
      pointStrokeColors: ['black'],
      lineColors:['gray','red']
    };
config.element = 'area-chart';
Morris.Area(config);
config.element = 'line-chart';
Morris.Line(config);
config.element = 'bar-chart';
Morris.Bar(config);
config.element = 'stacked';
config.stacked = true;
Morris.Bar(config);
Morris.Donut({
  element: 'pie-chart',
  data: [
    {label: "Friends", value: 30},
    {label: "Allies", value: 15},
    {label: "Enemies", value: 45},
    {label: "Neutral", value: 10}
  ]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/js/bootstrap.min.js"></script>
<link href="http://blackrockdigital.github.io/startbootstrap-simple-sidebar/css/simple-sidebar.css" rel="stylesheet"/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.0/morris.js'></script>

<link href="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/css/bootstrap.min.css" rel="stylesheet"/>

<link rel='stylesheet prefetch' href='http://cdn.oesmith.co.uk/morris-0.5.1.css'>
<div class="container-fluid" id="wrapper">
   <div id="sidebar-wrapper">
		<aside class="sidebar">
		<nav class="sidebar-nav">
		</nav>
	</aside>

	</div>

<div id="page-content-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-8">
        <div class="panel panel-success">
          <div class="panel-heading">
            <h3 class="panel-title">Sales</h3>
          </div>
          <div class="panel-body">
            <div id="area-chart" ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  </div>

我正在通过单击“菜单切换按钮”来调整页面大小，但是当我这样做时，Morris图表没有调整大小，我试图触发它，但它不起作用。我在我的js $(window).trigger('resize');中添加了一行代码但是这个dint工作了。有谁能够帮我？因为我不知道jQuery中的resize选项。

谢谢-Riot Zeast队长

Answer 1

HTML：

<div id="area-chart" class="col-sm-12"></div>

创建一个变量和所需的所有Morris图表初始化，但确保在初始化Morris图表时不要包含以下属性redraw: true和resize: true

var bar = Morris.Bar({......});

这里jquery调整大小函数魔法，当div调整大小时触发不需要触发窗口调整大小。

$('#area-chart').resize(function () {
  bar.redraw();
});

每当DIV调整大小时，Morris Chart自动适合它的父DIV，即col-sm-6。

此解决方案根据父div大小为您提供图表的大小。

您也不需要添加单击功能。

Answer 2

我有同样的问题，我可以这样解决：

var donut = null;    

this.init = (function() {

    ...

    donut = Morris.Donut({
        element : 'id-div',
        data : [{ label:"no data", value:100 }],
        colors : [ '#E6A548', '#1CC09f', '#FB5651', '#1CC09f', '#63A3DF', '#999' ],
    });
});

this.find = (function() {
    $.ajax() ... {

        donut.setData(dados);
        donut.redraw();

    }
});

Answer 3

这对我有用。

$（ “＃morrisArea”）。CSS（ “高度”， “400”）

Answer 4

这为我工作

HTML

<div class="row">
      <div id="graph" class="col-xs-12"></div>
 </div>

JavaScript的

var line = Morris.Line({
            element: 'graph',
            data: $.parseJSON(dataParam),
            xkey: 'x',
            ykeys: ['y'],
            labels: ['Usage Graph'],
            fillOpacity: 0.6,
            hideHover: 'auto',
            behaveLikeLine: true,
            resize: true,
            pointFillColors: ['#ffffff'],
            pointStrokeColors: ['black'],
            lineColors: 'black',
            parseTime: false,
            backgroundColor: '#FFFFFF',
            labelColor: 'black'
        });
        var parentDivWidth = $("#graph").parent("div").width();
        $("#graph").css("min-width", parentDivWidth);
        $("#graph > svg:nth-child(1)").css("min-width", parentDivWidth);
        line.redraw();