设置 google.visualization.DataTable 的列宽

2024-02-22

我想更改 google.visualization.DataTable 中列的宽度,但是我不知道该怎么做。

Fiddler: https://jsfiddle.net/dgbh6sL0/1/ https://jsfiddle.net/dgbh6sL0/1/

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['table']}]}"></script>
<div id="table_div"></div>

JS

google.setOnLoadCallback(drawTable);

  function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows([
      ['Mike',  {v: 10000, f: '$10,000'}, true],
      ['Jim',   {v:8000,   f: '$8,000'},  false],
      ['Alice', {v: 12500, f: '$12,500'}, true],
      ['Bob',   {v: 7000,  f: '$7,000'},  true]
    ]);

    var table = new google.visualization.Table(document.getElementById('table_div'));

    table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
  }

期待

  • “名称”列宽度应为 300px;
  • “全职员工”列宽应为 100 像素;

任何建议/帮助表示赞赏。

EDIT

根据建议,应用的解决方案如下:https://jsfiddle.net/dgbh6sL0/2/ https://jsfiddle.net/dgbh6sL0/2/


你可以这样做:

data.setProperty(0, 0, 'style', 'width:300px');

另外,您需要在“draw”中“allowHTML”,例如:

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

设置 google.visualization.DataTable 的列宽 的相关文章

  • 显示 div 内的用户名列表

    我是 jQuery 新手 在我的项目中 我创建了一个类User其中代码如下所示 static ConcurrentDictionary
  • 如何将 iLike 运算符与 Sequelize 结合使用来进行不区分大小写的查询

    我使用 Sequelize 和 PostgreSQL 来管理我的数据库 我想执行不区分大小写的搜索查询 当我用谷歌搜索时 有人说我可以使用 iLike 运算符来做到这一点 我尝试以这种方式实现 var getRadiosByGenre fu
  • Rails 上的 SASS 无效 CSS 错误

    我正在尝试使用http startbootstrap com stylish portfolio http startbootstrap com stylish portfolio但是 在我的 Rails 应用程序中 我在 vintage
  • 移动设备上的剩余悬停效果

    我一整天都在努力做这个JSFiddle http jsfiddle net gsamaras q2w4jjyt 4 也适用于手机 但我所有的尝试都没有效果 在桌面上 当用户将鼠标悬停在箭头上时 它会变成红色 在移动设备上 当用户触摸 为了单
  • 使用 JSONP 时出现“无效标签”?

    我的 JSONP 请求有问题 数据不会显示 Firebug 显示 无效标签 错误 我的 JavaScript ajax url link dataType jsonp beforeSend function xhr var base64 b
  • HTML CSS 循环协助

    希望你能帮忙 我想知道您是否可以在循环中创建以下类型 你知道这是否可能吗 body background 000 DEMO SPECIFIC STYLES typewriter h1 color fff font family Bebas
  • IE 中的 jQuery 鼠标闪烁

    当我在 IE 中执行 fadeIn fadeOut slideUp slideDown toggle 等 jQuery 函数时 鼠标总是闪烁 沙漏在光标旁边的视图中快速闪烁 我尝试了不同的方法来在动画进行时完全隐藏鼠标 但没有效果 而且在大
  • 防止 Firefox Web 通知自动关闭

    我已经在 Firefox 中将 Web 通知与服务器发送的 DOM 事件结合使用 不幸的是 通知在大约两到三秒后消失 我更喜欢 Chrome 的方法 即让消息保持可见 在任何给定时间最多显示三个 直到用户单击通知 这是我所拥有的 windo
  • Ace Editor 自动完成和多种语言

    如何为 Ace 编辑器创建自动完成功能以及如何突出显示 php 中的 html javascript 和 csshttp ace ajax org http ace ajax org
  • 如何在vuetify中设置固定工具栏?

    在 vuetify 中我使用工具栏
  • 以编程方式在 Highcharts 中使用缩放绘制矩形和线条

    我正在使用 Highcharts 进行一些编程绘图Highcharts Renderer http api highcharts com highcharts Renderer using path and rect 在下面的代码中 我手动
  • 等高列并将最后一项与底部对齐

    我有一个列表 其中每个li有嵌套容器 我尝试为所有列表项保留相同的高度 并将最后一个 div 推到底部 我将如何使用 flex 来做到这一点 ul list container display inline flex justify con
  • 将 async 和await 与export const 一起使用

    我无法完成这项工作 它说 await 是一个保留字 是的 当然是 而且我想使用它 怎么了 export const loginWithToken async gt return dispatch gt dispatch type SESSI
  • 带数字键的 Immutable.js 映射(包括性能测试)

    我在 React Native 应用程序中将 Immutable js 与 Redux 结合使用 元数据 例如查找表 是从服务器获取的 并作为 Immutable Map 保存在应用程序本地 查找值的键是整数 数据库中的主键 当我获取数据时
  • 如何比较 JavaScript 表格中的单元格并测试是否相等? indexOf 是如何工作的?

    我在 HTML 代码中创建了一个表格 它有 9 列和 13 行 它被 JavaScript 循环完全填满 该循环用几个数组中的人名填充它 但是 我想添加一个验证步骤 确保一行中没有两个单元格具有相同的值 并且每个单元格的值不会在其正下方的单
  • 如何在不接受焦点的元素上捕获键盘事件?

    我知道要处理输入字段中的键盘事件 您可以使用 input keyup function e var code e keyCode and 13 is the keyCode for Enter 但是 现在 我有一些div and li元素
  • Web API 2.0 使用 pascalcase 模型接收驼峰式命名的 JSON 数据

    我正在尝试对我的 Web API 进行 PUT 调用 我在 WebApiConfig cs 中设置了以下内容 以处理以驼峰形式将数据发送回我的 Web 项目 config Formatters JsonFormatter Serialize
  • JQuery 设置动态最大宽度

    我不太擅长 jQuery 因此完整的代码解决方案将是理想的选择 该函数将 获取浏览器屏幕的 70 宽度 将该宽度转换为其相应的 px 值 设置最大宽度 mainContainer使用从转换 计算中获得的值 这是我要设置的容器的 CSS 样式
  • 构造函数可以返回什么值来避免返回 this ?

    确切的情况是什么 returnJavascript 中的语句可以返回除this当使用构造函数调用时new关键词 Example function Foo return something var foo new Foo 如果我没记错的话 如
  • 使用 ASP.Net 和 Ajax 的登录页面

    我正在尝试使用 html ajax 和 ASP NET 制作登录页面 数据确实传递给 ajax 函数 但是当我调试 asp 页面时 用户名和密码以 NULL 发送 该代码应该获取用户名和密码 然后返回用户 ID html页面 div Use

随机推荐