如何调整莫里斯图表的大小?

2024-02-28

// 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>

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

谢谢 -防暴狂热队长


html:

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

创建一个变量和您需要的所有莫里斯图初始化,但确保在初始化莫里斯图时不包含以下属性redraw: true and resize: true

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

这里的 jquery resize 函数魔术会在 div 调整大小时触发,无需触发窗口调整大小。

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

每当 DIV 调整大小时,莫里斯图都会自动适应它的父 DIV,即col-sm-6.

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何调整莫里斯图表的大小? 的相关文章

  • 将对象传递给jquery中的回调函数

    我最近正在开发小型聊天模块 该模块需要不断检查服务器是否有新消息 我正在向服务器发送 ajax 请求 服务器将保持连接 直到找到新消息 长轮询 Code var chatController function other variable
  • Ionic 和 Angular 2 - 拒绝应用“http://localhost:8100/build/main.css”中的样式,因为其 MIME 类型(“text/html”)不受支持

    My Ionic https en wikipedia org wiki Ionic mobile app framework 构建一直运行得很好 直到我想在我的 iPhone 上进行测试 所以我停止了我的服务器 做了一个ionic ser
  • $index 中的 AngularJS 数字

    举例来说 我有以下代码 伪 div index div 结果将是 1 2 3 4 5 6 我怎样才能改变上面的代码以便打印索引 001 002 003 004 005 006 以便索引打印为 3 位数字 您可以使用过滤器轻松完成此操作 首先
  • 窗口对象没有创建它的页面附加的属性

    我用window open url target 开一个url在新选项卡 窗口中 在此之前 我在新打开的窗口对象上设置了一些属性 目的是将数据从该页面 新窗口的创建者 传递到新创建的窗口 在除 Internet Explorer 之外的所有
  • JavaScript 附加和前置与 jQuery 附加和前置

    QA Style 我最近读了一篇文章 里面说JavaScript已经实现了append and prepend受 jQuery 启发的方法 这对我来说是一个新知识 因为据我所知 要附加一个元素 我必须使用element appendChil
  • 从右到左的语言和编程问题

    我正在创建一个网络文本编辑器 它使用我创建的新语言 如 BBcode 这种标记语言将采用阿拉伯语 但我面临这些问题 在所有 IDE 和编辑器中将英语和阿拉伯语文本混合在同一行中确实很困难 因为会发生奇怪的事情 单词和字符的顺序发生变化 使用
  • Rails:包括外部 JavaScript

    我想使用 JavaScript 库 例如 jQuery 插件 我是否使用 Rails 资产管道 或者我应该将其包含在 javascript include tag 中 我有哪些选择以及推荐的做法是什么 您会仅在几个页面上还是在整个应用程序中
  • 如何在延迟加载期间在图像占位符顶部显示“正在加载”gif 图像

    我正在使用这个 jQuery 插件来延迟加载我的图像 惰性加载器 http www appelsiini net projects lazyload 它运行良好 我只想在所有尚未加载的图像之上显示一个 正在加载 图像 可能是 gif 当图像
  • 是否存在必须在 HTML/JavaScript 中使用早期绑定/内联事件属性的情况

    在我对以下问题的回答中 事件绑定是什么意思 https stackoverflow com q 6329996 144491 我顺便说一下 使用 inline JavaScript Early Binding 来绑定 JavaScript
  • RegEx 使用 match() 在 JavaScript 中提取字符串数组

    我正在尝试使用string match 在 javascript 中使用正则表达式来提取字符串数组 这是一个示例字符串 CREATE TABLE listings listing id INTEGER UNIQUE state TEXT t
  • 如何判断CKEditor是否已加载?

    如何确定 CKEditor 是否已加载 我查看了API文档 但只能找到loaded事件 我想检查 CKEditor 是否已加载 因为如果我第二次加载它 我的文本区域就会消失 The loaded活动对我不起作用 instanceReady
  • 解析器阻塞与渲染阻塞

    我一直在阅读有关优化网络性能的 Google 开发人员文档 我对那里使用的术语有点困惑 CSS 和 JavaScript 文件都会阻止 DOM 构建 但是 CSS 被称为渲染阻塞 而 JavaScript 被称为解析器阻塞 解析器阻塞 和
  • 为什么 useState 会导致组件在每次更新时渲染两次?

    我这里有一段简单的代码 import React useState from react import styles css export default function App const number setNumber useSta
  • JavaScript IDE/编译器

    现在 我希望你们中的一些人能够理解我的要求 我是编程新手 我在 Codecademy com 上了解了 JavaScript 我使用 labs codecademy com 来编写 JavaScript 但它有限制 对于编程新手来说 我可以
  • 包括来自raw.github.com的js

    我有一个 github com 演示页面 链接到https raw github com master file js https raw github com master file js这样我就不需要总是复制 js文件转移到gh pag
  • Dojo require,模块加载失败时连接错误

    当我尝试加载不存在的模块时 它失败并出现 404 错误 当然 我想处理此错误 但不知道如何连接到 错误 事件 根据 Dojo 文档 我应该能够使用它的微事件 API http livedocs dojotoolkit org loader
  • 加密 Chrome 扩展程序?

    无论如何 要加密 Chrome 扩展程序 以免暴露源代码 您可以使用混淆器隐藏您的代码 市场上有很多可用的 像Google Closure编译器这样的工具很少 而且市场上有很多在线javascript ofuscators 你可以使用任何一
  • JavaScript TypedArray 混合类型

    我正在尝试使用 WebGL 并希望将一些不同类型混合到一个字节缓冲区中 我知道 TypedArrays 可以达到这个目的 但不清楚我是否可以与它们混合类型 OpenGL 顶点数据通常是与无符号字节或整数混合的浮点数 在我的测试中 我想将 2
  • 如何检查输入元素是否隐藏?

    如何检查输入元素是否被隐藏 隐藏为type hidden myInputElement attr type hidden 隐藏为display none myInputElement is hidden
  • 如何自动加载 Webpack 中给定目录中的所有 JSON 文件? [复制]

    这个问题在这里已经有答案了 编辑 有一个现有的问题 https stackoverflow com questions 29421409 how to load all files in a subdirectories using web

随机推荐