- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 Google Charts API 创建仪表板。
仪表板包括一个类型为 ChartRangeFilter 的 ControlWrapper 和两个 ChartWrapper(折线图和表格)。此设置工作正常,但我想添加一项。
LineChart 应显示整个数据集,Table 仅显示其中的一部分。例如,我有 10 行,在表格中只应显示前 8 行。
这是我当前的 ControlWrapper:
control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '95%'},
'hAxis': {'baselineColor': 'none'}
},
'chartView': {
'columns': [0,1]
},
'minRangeSize': 86400000
}
}
});
这是表格:
chart = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table',
'options': {
width: 470,
height: 340,
sortColumn: 0,
sortAscending: false
},
'view': {
'columns': [0, 1]
//,'rows': [0,1,2,3,4,5,6]
}
});
当我取消注释表定义中的行“//,'rows': [0,1,2,3,4,5,6]”时,当我移动 ControlWrapper 的 slider 时出现错误:
Invalid row index 6. Should be in the range [0-5]
有没有办法让它工作?
原因是(在这个例子中)最后两行只有第3列的数据,只在折线图中显示,在表格中没有显示。
提前致谢!
//编辑:
这是一个示例页面: http://circlecount.com/test.chart.range.php
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.1//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-2.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" version="XHTML+RDFa 1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/1999/xhtml http://www.w3.org/MarkUp/SCHEMA/xhtml-rdfa-2.xsd" lang="de" xml:lang="de" dir="ltr" xmlns:og="http://ogp.me/ns#" >
<head>
<script src="http://www.google.com/jsapi?key=" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.7.1");</script>
</head>
<body>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart', 'table', 'controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(fctDrawChart);
var control, chart;
function fctDrawChart() {
//follower
var data = new google.visualization.DataTable();
var myTempDate = new Date();
data.addColumn('date', 'Day');
data.addColumn('number', 'Followers');
data.addRows(10);
data.setCell(0, 0, new Date('11/07/2011'));
data.setCell(0, 1, 11);
data.setCell(1, 0, new Date('11/08/2011'));
data.setCell(1, 1, 222);
data.setCell(2, 0, new Date('11/09/2011'));
data.setCell(2, 1, 1242);
data.setCell(3, 0, new Date('11/10/2011'));
data.setCell(3, 1, 1420);
data.setCell(4, 0, new Date('11/11/2011'));
data.setCell(4, 1, 1609);
data.setCell(5, 0, new Date('11/12/2011'));
data.setCell(5, 1, 1676);
data.setCell(6, 0, new Date('11/13/2011'));
data.setCell(6, 1, 1734);
data.setCell(7, 0, new Date('11/14/2011'));
data.setCell(7, 1, 1773);
data.setCell(8, 0, new Date('11/15/2011'));
data.setCell(8, 1, 1857);
data.setCell(9, 0, new Date('11/16/2011'));
data.setCell(9, 1, 1874);
var dataView = new google.visualization.DataView(data);
dataView.setColumns([0, 1]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '95%'},
'hAxis': {'baselineColor': 'none'}
},
'chartView': {
'columns': [0,1]
},
'minRangeSize': 86400000
}
}
});
google.visualization.events.addListener(control, 'statechange', function() {
$("#periodSelector").val("custom");
});
chart = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table',
'options': {
width: 470,
height: 340,
sortColumn: 0,
sortAscending: false
},
'view': {
'columns': [0, 1]
,'rows': [0,1,2,3,4,5,6]
}
});
chart2 = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart',
'options': {
width: 470,
height: 340,
sortColumn: 0,
sortAscending: false
},
'view': {
'columns': [0, 1]
}
});
dashboard.bind(control, chart);
dashboard.bind(control, chart2);
dashboard.draw(data);
}
</script>
<div id='dashboard' >
<div id='table' style='width:240px;height:400px;'></div>
<div id='chart' style='width:240px;height:400px;'></div>
<div id='control' style='width:840px;height:40px;'></div>
</div>
</div>
</body>
</html>
我想得到的:- 整个时期(10 天)的图表- 仅前 7 天的表格- 整个期间(10 天)的 ControlWrapper,控制图表和表格
我希望这能让我的问题更清楚。如果没有,请给我留言。
提前致谢!
更新:有了 jmac 的想法,我让它可以使用以下功能:
google.visualization.events.addListener(control, 'statechange',
function(event) {
if (control.getState()["range"]["end"] > myLastRealDate) {
var myRowsArr = new Array();
var myTempDate = control.getState()["range"]["start"];
for (var i=0;i<myLastRealRow-(myDateArr[(myTempDate.getMonth()+1)+"/"+myTempDate.getDate()+"/"+myTempDate.getFullYear()]);i++) {
myRowsArr.push(i);
}
chart.setView({'rows': myRowsArr});
}
else {
chart.setView({'rows': null});
}
});
您可以在这里找到一个工作示例:http://circlecount.com/test.chart.range.php
最佳答案
问题可以通过以下函数解决:
google.visualization.events.addListener(control, 'statechange',
function(event) {
if (control.getState()["range"]["end"] > myLastRealDate) {
var myRowsArr = new Array();
var myTempDate = control.getState()["range"]["start"];
for (var i=0;i<myLastRealRow-(myDateArr[(myTempDate.getMonth()+1)+"/"+myTempDate.getDate()+"/"+myTempDate.getFullYear()]);i++) {
myRowsArr.push(i);
}
chart.setView({'rows': myRowsArr});
}
else {
chart.setView({'rows': null});
}
}
);
每个日期的行数必须保存在一个数组中,例如:
myDateArr['11/7/2011'] = 0;
“中断”的行和日期也必须保存在变量中:
myLastRealDate = new Date('11/14/2011');
myLastRealRow = 7;
关于javascript - 谷歌图表 API - 仪表板 : Hide rows in table,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16470755/
这个问题在这里已经有了答案: What is the best way to parse html in C#? [closed] (15 个答案) 关闭 3 年前。 string input =
为什么 wrapper #4 没有继承其父表容器的高度?表格嵌套在一个显示 block 包装器中,每个嵌套的div是显示表格,每个表格继承到最里面的一个。是什么原因造成的,我该如何解决? jsfidd
我正在使用带有 Bootstrap 的自定义 css 作为外边框。但顶部边框不可见,除非我将其大小设置为 2 px。 我该如何解决这个问题? HTML #name 1.one 2.two 3.thr
我正在逻辑层面上设计一个数据库,以便稍后将其传递给程序员来交付。我只是粗略地了解它们的工作原理,所以我很难简洁地表达我的问题。这是我的问题: 我有一个名为 MEANINGS 的表。 我有一个名为 WO
在 Laravel 上,我们可以使用 DB::table('table')->get(); 或使用 model::('table')->all() 进行访问;我的问题是它们之间有什么区别? 谢谢。 最
我试图从以下内容中抓取 URL从 WorldOMeter 获取 CoVid 数据,在此页面上存在一个表,id 为:main_table_countries_today其中包含我希望收集的 15x225
这是我的图表数据库:/image/CGAwh.png 我用 SEQUELIZE 制作了我的数据库模型: 型号:级别 module.exports = (sequelize, DataTypes) =>
我真的不明白为什么我的代码不能按预期工作。当我将鼠标悬停在表格的每一行上时,我想显示一个图像(来 self 之前加载的 JSON)。每个图像根据行的不同而不同,我想将它们显示在表格之外的另一个元素中。
假设我的数据库中有一张地铁 map ,其中每条线路的每个站点都是一行。如果我想知道我的线路在哪里互连: mysql> SELECT LineA.stop_id FROM LineA, LineB WH
我最近经常使用这些属性,尤其是 display: table-cell。它在现代浏览器中得到了很好的支持,并且它对某些网格有很多好处,并且可以非常轻松地对齐内容,而无需棘手的标记。但在过去的几天里,我
在 CSS 中,我可以这样做: http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png http://s1.ipicture.ru/uploads/20
问题作为标题,我正在学习sparkSQL,但我无法很好地理解它们之间的区别。谢谢。 最佳答案 spark.table之间没有区别& spark.read.table功能。 内部 spark.read.
我正在尝试根据 this answer 删除表上的非空约束.但是,它似乎没有在 sqlite_sequence 中创建条目。这样做之后,即使我可以在使用测试表时让它正常工作。 有趣的是,如果我备份我的
var otable = new sap.m.Table();//here table is created //here multiple header I'm trying to create t
下面两种方法有什么区别: 内存 性能 答: select table.id from table B: select a.id from table a 谢谢(抱歉,如果我的问题重复)。 最佳答案 完
我尝试在表格后添加点,方法是使用 table::after 选择器创建一个点元素并使用 margin: 5px auto 5px auto; 将其居中。它有效,但似乎在第一个表格列之后添加了点,而不是
我正在设计一个可以标记任何内容的数据库,我可能希望能够选择带有特定标记的所有内容。 我正在为以下两个选项而苦苦挣扎,希望得到一些建议。如果有更好的方法请告诉我。 选项A 多个“多对多”连接表。 tag
"center" div 中的下表元素导致 "left" div 中的内容从顶部偏移几个像素(在我的浏览器中为 8 ).在表格之前添加一些文本可消除此偏移量。 为什么?如何在不要求在我的表格前添加“虚
我是一名优秀的程序员,十分优秀!