个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在使用 Google Annotated Timeline 图表，鼠标滚轮缩放时间刻度变得很烦人。我希望能够使用滚轮向下滚动图表页面，但时间线图表正在拦截滚轮事件。它阻止我向下滚动页面并将我的时间线缩放更改为不可用的范围。
最佳答案
我为你的问题写了一个解决方案。我已将我的解决方案应用于来自 google 的带注释的时间线示例此外，我使用了来自 here 的鼠标滚轮事件捕获技术。 .
要重现问题:
scrolled在接下来的 1.5 秒内设置为 1，并应用正常的页面滚动行为。
rangechange事件由
annotatedtimeline 触发对象范围的更改已撤消。这样，您的原始图形缩放级别就会恢复。
chartRange 中。 ，在必须撤消范围更改时读取。
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// source: https://developers.google.com/chart/interactive/docs/
// gallery/annotatedtimeline
google.load('visualization', '1', {packages: ['annotatedtimeline']});
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sold Pencils');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'Sold Pens');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
data.addRows([
[new Date(2008, 1 ,1), 30000, null, null, 40645, null, null],
[new Date(2008, 1 ,2), 14045, null, null, 20374, null, null],
[new Date(2008, 1 ,3), 55022, null, null, 50766, null, null],
[new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock',
'Ran out of stock on pens at 4pm'],
[new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens',
66467, null, null],
[new Date(2008, 1 ,6), 33322, null, null, 39463, null, null]
]);
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
document.getElementById('visualization'));
annotatedtimeline.draw(data, {'displayAnnotations': true,
'wmode': 'transparent'});
// In the lines below the default scroll when the mouse is on the
// AnnotatedTimeLine graph is disabled and normal page scroll
// behaviour is enabled.
var chartRange, scrolled, mySetInterval
google.visualization.events.addListener(annotatedtimeline , 'ready',
function() {
//save the zoom state in chartRange after graph has been rendered
chartRange = annotatedtimeline.getVisibleChartRange();
});
google.visualization.events.addListener(annotatedtimeline ,
'rangechange',function() {
if (scrolled) {
// document was scrolled during last 1.5 seconds, therefore undo
// zooming. The 1.5 second delay is needed because rangechange is
// fired one 1 second after scroll event
annotatedtimeline.setVisibleChartRange(chartRange.start,
chartRange.end);
}else{
// document was not scrolled during last 1.5 seconds, therefore
// save the zoom state in chartRange
chartRange = annotatedtimeline.getVisibleChartRange();
}
});
// source: http://help.dottoro.com/ljqeknfl.php
// for mouse scrolling in Firefox
var elem = document.getElementById ("visualization");
if (elem.addEventListener) {//all browsers except IE before version 9
// Internet Explorer, Opera, Google Chrome and Safari
elem.addEventListener ("mousewheel", MouseScroll, false);
// Firefox
elem.addEventListener ("DOMMouseScroll", MouseScroll, false);
}
else {
if (elem.attachEvent) { // IE before version 9
elem.attachEvent ("onmousewheel", MouseScroll);
}
}
//original from:http://help.dottoro.com/ljqeknfl.php and edited by me
function MouseScroll (event) {
// set scrolled to 1 for the next 1.5 second, and via
// mySetInterval make sure when multiple scroll event in 1.5
// second appear, everything wroks correctly
clearInterval(mySetInterval);
scrolled=1;mySetInterval=setInterval(function(){scrolled=0},1500);
//determine distance to be rolled
var rolled = 0;
if ('wheelDelta' in event) {
rolled = event.wheelDelta;
}
else { // Firefox
// The measurement units of the detail and wheelDelta
// properties are different.
rolled = -40 * event.detail;
}
//apply normal page scroll behaviour
document.body.scrollTop -=rolled;
}
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
<div style="height:1200px; background-color:#a08080;"></div>
</body>
</html>
关于google-visualization - 如何在 Google Annotated Timeline 中禁用鼠标滚轮缩放？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6714631/
24
4
0
我正在尝试实现一个时间轴，但是当我点击其中一个不同的状态时我无法更改颜色 :( 有谁知道我的问题是什么或者我该怎么做？ 本来的想法是给不同的状态分配不同的颜色，但是没有成功:( 在图片中我留下了一个我
我在我的应用程序中使用时间轴 JS 来根据日期显示两种类型的报告。它工作正常，但是当报告数据数量较多时，很难找到哪个报告属于哪个类别。所以我想在timemarker中使用不同的文本颜色来区分两种类型。
我有一个由客户端软件调用的 WPF 应用程序。它第一次工作正常。当我从客户端软件关闭 WPF 应用程序并再次加载 WPF 应用程序(中间没有关闭客户端软件))时，它抛出一个异常，因为“属性元数据已经为
我需要可视化时间线内的大量数据。我发现'verite Timeline '看起来很有希望，但我没有任何经验，使用了很多数据集。有人可以告诉我这个工具的性能或告诉我更好的解决方案吗？谢谢! 最佳答案 正
我有一个数据框，其中包含不同团队执行的任务的信息。 我想使用 R.Blue box = team 绘制类似的图，如下所示。任务已完成 = 绿框。执行任务=灰框。我正在考虑使用 ggplot2 geom
我对任何可以执行以下操作的库感兴趣: 我有一个时间范围:假设 1995 年到 2010 年，我可以以某种方式对其进行分类，假设为“互联网时代”。 然后我希望能够将其进一步分解，将 2001-2010
我有一个谷歌时间轴，如下面的代码所示，我想更改任何标题为“黑色”的条目的颜色。我似乎无法让它工作，我尝试了几种不同的解决方案。这是我的代码: http://jsfiddle.net/5j0umkcx/
我正在尝试创建一个 Internet 检查器类，它将检查与某个 url 的连接并相应地更新状态属性。为了避免 ui 卡住，我想使用一个线程和一个计时器在一定时间间隔后重新检查。问题是时间轴关键帧中的
我目前正在构建一个基于网络的迷你社交网络。与 Facebook 一样，每个用户都有一个发布最近事件的时间表。这些事件包括状态更新、在页面上发帖、添加新 friend 和喜欢页面。 它们在数据库中使用这
我创建了一个时间表，有时连续有两个时间表。这不是问题，但我想在一行中重叠显示它们。 请看这个例子: 因此，较小的行应显示为较大行的一部分。 Google 的可视化 API 很棒，是一件非常好的东西，但
我有一个包含很多行的时间表，每行中都有几个时间表。 我想为每个时间表固定一个确切的颜色，这样一种类型的时间表在每一行中都会有相同的颜色。 我正在使用这段代码: var options = {
我将如何存储用户“帖子”？这样我就可以有效地从数据库中获取它们，然后在请求特定用户页面时处理它们以按时间顺序显示？ 我是否像这样将所有用户的所有帖子存储在一个表中: Post ID | Poster
我需要将 Pane 的背景颜色设置一秒钟，然后将其切换为透明。我已将其设置为更改背景颜色，使用持续时间为 1000 毫秒的时间线暂停它，然后切换为透明。 时间轴没有暂停，程序飞过它并且过快地将背景设置
编辑:Java/FX 版本:13.0.2 集成环境:Eclipse 4.13.0 Tracker 和 changePerFrame 值在类级别上声明为私有(private) double 变量。 目标
我正在尝试找到合适的 css 类来为 vis timeline 的组标签分配新的背景颜色。这是我的 jsfiddle 示例。 I want to give the Label in front of
我正在 Timeline lite 中对多个补间进行排序，但我希望其中几个补间同时发生在不同的对象上。如果没有 onComplete 函数，有没有办法做到这一点。我当前的补间序列是: tl.to($s
我正在构建一个视差滚动网站(我们不都是这样)，除其他外，它会在用户滚动时显示图像。 我通过将图像放在背景中并在顶部放置一个实心填充的 div 来完成“显示”。然后我根据滚动位置将此 div 从 100
我的问题是关于 Chrome DevTools，具体来说，我有关于时间轴选项卡的问题。因此，正如我读过无数次，我的浏览器必须以 60fps 的速度渲染我的像素。有时虽然它有一些繁重的 JS 执行并阻止
说明： 在pg中，当我们进行了基于时间点的还原(PITR)后，数据库会启用新的时间线并继续进行操作。 但是，当我们进行基于时间点的还原后如果发现又出现错误，想要继续还原数据库该如何操作呢？如何还
我在 Vis JS Timeline 中使用以下选项在时间线顶部生成带有时间标签的水平轴: orientation: { axis: 'both' }, 水平轴如下所示: 我的时间线有很多行，
我是一名优秀的程序员,十分优秀！