- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个看起来像这样的数据表:
+-------+---------+--------+
| month | name | income |
+-------+---------+--------+
| Jan | Alice | $5,000 |
| Feb | Alice | $3,000 |
| Mar | Alice | $4,500 |
| Jan | Bob | $2,750 |
| Feb | Bob | $8,000 |
| Mar | Bob | $1,000 |
| Jan | Charlie | $3,500 |
| Feb | Charlie | $4,100 |
| Mar | Charlie | $3,900 |
... ... ...
我希望显示一个带有一个 ChartWrapper 和一个 ControlWrapper 的 Google 可视化。
ChartWrapper 将显示一个表格,但我只希望此表格显示最近的月份。为此,我在 ChartWrapper 上使用 .setView()
。
ControlWrapper 将在名称列上包装一个 CategoryFilter。
我遇到的问题是,当我尝试选择一个名称时,它会抛出一个错误:Invalid row index ... Should be in range [0-...]
我相信我遇到这个问题是因为 setView
接受要显示的静态行数组,但如果表格被过滤,那么要显示的行将不同。我这样调用 setView
:
var recentRows = dataTable.getFilteredRows([
{
"column": 2,
"minValue": dataTable.getColumnRange(2).max
}
]);
chartWrapper.setView({
"rows": recentRows
});
最佳答案
当使用Dashboard
控件时,ChartWrapper
和 ControlWrapper
需要同步并使用相同的数据集
如您所见,仅在图表上设置 view
属性会引发此问题
要更正,请使用 DataView
绘制仪表板,
如以下工作片段所示...
google.charts.load('current', {
callback: drawChart,
packages: ['controls']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['month', 'name', 'income'],
[0, 'Alice', 5000],
[1, 'Alice', 3000],
[2, 'Alice', 4500],
[0, 'Bob', 2750],
[1, 'Bob', 8000],
[2, 'Bob', 1000],
[0, 'Charlie', 3500],
[1, 'Charlie', 4100],
[2, 'Charlie', 3900]
]);
var control = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control',
options: {
filterColumnLabel: 'name',
ui: {
allowTyping: false,
allowMultiple: true
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'chart'
});
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([{
column: 0,
minValue: data.getColumnRange(0).max
}]));
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard')
);
dashboard.bind(control, chart);
dashboard.draw(view);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="control"></div>
<div id="chart"></div>
另一种选择是不使用仪表板
独立绘制每个 wrapper ,
然后监听控件上的statechange
事件,
并相应地绘制表格
请参阅以下工作片段...
google.charts.load('current', {
callback: drawChart,
packages: ['controls']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['month', 'name', 'income'],
[0, 'Alice', 5000],
[1, 'Alice', 3000],
[2, 'Alice', 4500],
[0, 'Bob', 2750],
[1, 'Bob', 8000],
[2, 'Bob', 1000],
[0, 'Charlie', 3500],
[1, 'Charlie', 4100],
[2, 'Charlie', 3900]
]);
var control = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control',
dataTable: data,
options: {
filterColumnLabel: 'name',
ui: {
allowTyping: false,
allowMultiple: true
}
}
});
control.draw();
var chart = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'chart',
dataTable: data
});
google.visualization.events.addListener(control, 'ready', drawTable);
google.visualization.events.addListener(control, 'statechange', drawTable);
drawTable();
function drawTable() {
var filters = [{
column: 0,
minValue: data.getColumnRange(0).max
}];
var selectedNames = control.getState().selectedValues;
if (selectedNames.length > 0) {
filters.push({
column: 1,
test: function (value, row, column, table) {
return (selectedNames.indexOf(table.getValue(row, column)) > -1);
}
});
}
chart.setView({
rows: data.getFilteredRows(filters)
});
chart.draw();
}
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="control"></div>
<div id="chart"></div>
关于javascript - 带有过滤器和 DataView 的 Google 可视化仪表板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46219896/
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。
目录 内置的高亮节点 自定义高亮 自定义高亮时保持原始颜色 总结 案例完整代码 通过官方文档,可知高
目录 32.go.Palette 一排放两个 33.go.Palette 基本用法 34.创建自己指向自己的连线 35.设置不同的 groupTemplate 和
目录 41.监听连线拖拽结束后的事件 42.监听画布的修改事件 43.监听节点被 del 删除后回调事件(用于实现调用接口做一些真实的删除操作) 44.监听节点鼠标
织梦初秋 那是一个宜人的初秋午后,阳光透过窗户洒在书桌上,我轻轻地拂去被阳光映照出的尘屑,伸了个懒腰。哎呀,这个世界真是奇妙啊,想到什么就能用代码实现,就像笔尖上点燃的火花。 思索的起点 我一直对天气
曲径通幽,古木参天 时光匆匆,不经意间已是2023年的秋季。我身处在这个充满朝气和变革的时代,每天都充满了新的科技突破和创新。而当我想起曾经努力学习的Python编程语言时,心中涌动着一股热情,渴望将
我有一个堆积条形图,由一个 bool 字段分割。这会导致图例显示为两种颜色(很酷!)但图例具有以下值:true 和 false。对于读者来说,什么是真或假意味着什么是没有上下文的。 在这种情况下,字段
我想在 R 中做一个简单的一阶马尔可夫链。我知道有像 MCMC 这样的包,但找不到一个以图形方式显示它的包。这甚至可能吗?如果给定一个转换矩阵和一个初始状态,那将会很好,人们可以直观地看到通过马尔可夫
我是 tableau 的新手,我有以下可视化,这是链接: My visualization 我的问题是我不知道如何在一个仪表板中添加多个仪表板作为选项卡。在我的可视化中,有三个仪表板“Nota tot
我建立类似自动VJ程序的东西。我有2个网络摄像头发出的2个incomig视频信号和一些可视化效果(目前2个,但我想要更多)。我有一个以dB为单位的传入音频信号音量,以bpm为单位。我需要的是视频输出的
我需要可视化的东西,并想要求一些提示和教程。或者使用哪种技术(Cocos2D、OpenGL、Quartz,...) 这里有人在 iOS 设备上做过可视化吗? 它是关于移动物体、褪色、粒子等等…… 任何
我对 Graphviz 越来越熟悉,想知道是否可以生成如下所示的图表/图表(不确定你叫它什么)。如果没有,有人知道什么是好的开源框架吗? (首选,C++,Java 或 Python)。 最佳答案 根据
问题很简单——我真的很喜欢用 UIStackView 来组织 UI。但是,我在测试应用程序中看不到 UIStackView 边界。当 UI 元素不是预期的时候,我需要花很多时间来调试。在网上搜索,我找
例如,我可以通过以下方式分配内存时的情况: Position* arr1 = new Position[5]; Position 是我程序中的一个类,它描述了具有 x 和 y 值的位置点。 堆栈上会有
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 5 年前。
我最近一直在处理许多半复杂的 XSD,我想知道:有哪些更好的工具可以处理 XML 模式?有没有图形工具? 独立的或基于 Eclipse 的是理想的选择,因为我们不是 .net 商店。 最佳答案 我找到
通过一段时间的使用和学习,对G6有了更一步的经验,这篇博文主要从以下几个小功能着手介绍,文章最后会给出完整的demo代码。 目录 1. 树图的基本布局和
三维数据的获取方式 RGBD相机和深度图 代码展示:在pcl中,把点云转为深度图,并保存和可视化 三维数据的获取方式 在计算机视觉和遥感领域,点云可以通过四种主要的技术获得, (1)根据图像衍生而得,
代码 library(igraph) g <- graph.tree(n = 2 ^ 3 - 1, children = 2) node_labels <- c("", "Group A", "Gro
我正在关注 this tutorial并创建了一个这样的图表: from dask.threaded import get from operator import add dsk = { 'x
我是一名优秀的程序员,十分优秀!