- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 amChart使用插件 dataLoader加载数据和事件数据,所以我有这样的东西:
var defaultStockChartData = {
"dataLoader": {
"url": "urlToMyFile.csv",
"format": "csv",
"delimiter": ",",
"useColumnNames": true
},
/**
* data loader for events data
*/
"eventDataLoader": {
"url": urlToMyFile.scv,
"async": true,
"postProcess": function(data) {
for (var x in data) {
var color = "#85CDE6";
switch (data[x].Type) {
case 'A':
color = "#85CDE6";
break;
case 'B':
color = "#85C56E6";
break;
default:
color = "#cccccc";
break;
}
data[x] = {
"type": "pin",
"graph": "g1",
"backgroundColor": color,
"date": data[x].Date,
"text": data[x].Type,
"description": data[x].Description
};
}
return data;
}
}
...
}
现在我需要做的是一个复选框,它在选中时显示图形上所有类型为“A”的事件,并在未选中时隐藏所有类型为“A”的事件。
我怎样才能访问我图表的事件并按照它们的类型隐藏它们?
最佳答案
更好的方法是直接修改事件数据并将每个元素的 graph
属性切换为 null 或原始图形以显示/隐藏它们,这样您就不必绕过图表的项目符号处理缩放和其他事件。例如:
HTML:
<div>
<label>Hide Event A <input type="checkbox" class="hide-event" data-event="A"></label>
<label>Hide Event B <input type="checkbox" class="hide-event" data-event="B"></label>
</div>
JS:
//show/hide events based on selected checkbox
Array.prototype.forEach.call(
document.querySelectorAll('.hide-event'),
function(checkbox) {
checkbox.addEventListener('change', function() {
var event = checkbox.dataset.event;
chart.dataSets[0].stockEvents.forEach(function(eventItem) {
if (eventItem.text === event) {
if (checkbox.checked) {
//copy graph reference to a dummy value and null out the original graph
eventItem.oldGraph = eventItem.graph;
eventItem.graph = null;
}
else {
//restore original graph and null out copy/dummy reference
eventItem.graph = eventItem.oldGraph;
eventItem.oldGraph = null;
}
}
});
chart.validateData(); //redraw the chart
});
}
);
完整演示如下:
var chartData = [];
var eventData = [];
generateChartData();
//show/hide events based on selected checkbox
Array.prototype.forEach.call(
document.querySelectorAll('.hide-event'),
function(checkbox) {
checkbox.addEventListener('change', function() {
var event = checkbox.dataset.event;
chart.dataSets[0].stockEvents.forEach(function(eventItem) {
if (eventItem.text === event) {
if (checkbox.checked) {
//copy graph reference to a dummy value and null out the original graph
eventItem.oldGraph = eventItem.graph;
eventItem.graph = null;
}
else {
//restore original graph and null out copy/dummy reference
eventItem.graph = eventItem.oldGraph;
eventItem.oldGraph = null;
}
}
});
chart.validateData(); //redraw the chart
});
}
);
function generateChartData() {
var firstDate = new Date( 2012, 0, 1 );
firstDate.setDate( firstDate.getDate() - 500 );
firstDate.setHours( 0, 0, 0, 0 );
for ( var i = 0; i < 500; i++ ) {
var newDate = new Date( firstDate );
newDate.setDate( newDate.getDate() + i );
var a = Math.round( Math.random() * ( 40 + i ) ) + 100 + i;
var b = Math.round( Math.random() * 100000000 );
chartData.push( {
"date": newDate,
"value": a,
"volume": b
} );
if ((i + 1) % 8 === 0) {
eventData.push({
"date": newDate,
"type": "sign",
"backgroundColor": "#85CDE6",
"graph": "g1",
"text": (i + 1) % 5 == 0 ? "B" : "A",
"description": "Event " + ((i + 1) % 5 == 0 ? "B" : "A") + " at index " + i
})
}
}
}
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"theme": "light",
"dataSets": [ {
"color": "#b0de09",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
} ],
"dataProvider": chartData,
"categoryField": "date",
// EVENTS
"stockEvents": eventData
} ],
"panels": [ {
"title": "Value",
"stockGraphs": [ {
"id": "g1",
"valueField": "value"
} ],
"stockLegend": {
"valueTextRegular": " ",
"markerType": "none"
}
} ],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"graphBulletSize": 1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
}
} );
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div>
<label>Hide Event A <input type="checkbox" class="hide-event" data-event="A"></label>
<label>Hide Event B <input type="checkbox" class="hide-event" data-event="B"></label>
</div>
<div id="chartdiv"></div>
关于javascript - AmChart : hide event,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53189618/
我先说我是一个新手 Haskell 程序员(这些年来偶尔会修改它)但是当谈到 OOO 和命令式编程时,我有几年的时间。我目前正在学习如何使用 monad 并通过使用 monad 转换器将它们组合起来(
基本上我正在寻找的是能够从选择项的下拉列表中隐藏选项的能力。因此,从技术上讲,它们仍然是选项,但由于它们是隐藏的,因此您将无法单击它们。 我查看了文档并找到了与禁用相关的内容,不幸的是我非常希望能够隐
我正在制作一个平均堆栈应用程序,但遇到了一个问题!我尝试在第 10 个问题问完后隐藏所有内容。我使用指令 ng-hide,当我到达第 10 个问题时,该指令被设置为 true!这是代码:
好吧,我正在尝试对我发现的网站上的一项功能进行逆向工程 - 网站管理员没有回复我。有问题的网站是http://www.win-free-stuff.ca/new-contests特别是,我正在尝试构建
我正在为一个 div 设置动画。它具有以下定义: ... 我定义了以下 CSS: div.ng-hide { transition: 0.5s linear opacity; opac
我正在创建一个自定义应用程序,它将在其自己单独的 Excel 实例(新应用程序)中启动。 新创建的实例默认不可见,因此需要手动使其可见。我喜欢仅在一切设置完毕后才让我的应用程序可见 - 以避免屏幕闪烁
这是非常基本的代码: $('.myDiv').click(function() { $('.anotherDiv').hide(); alert('pause the ui');
我正在尝试为一些图片制作一个 super 简单的灯箱。基本上我有一个 div,其中包含一组使用 ng-repeat 显示的图像,我希望在单击其中一个图像时显示一个灯箱 div。我不知道为什么我的灯箱
我正在尝试为 制作动画单击按钮从左侧滑入/滑出。我正在使用 Angular 框架和 ng-show控制 显示/可见性,并将转换添加到 ng-hide样式集。 我已经成功地让 div 从左边滑入,但是
我正在写一个非常简单的幻灯片,我使用的是“常规”hide(),如下所示: jQuery("#featured li:nth-child(1)").hide('slow'); 这不仅隐藏了里,而且还慢慢
我有一个产品页面,在 Bootstrap 中以砖石格式显示 -md 和 -lg(中型和大型)屏幕的结果,其中图像可能具有不同的高度 - 对于 -sm 或 -xs,我对较小的设备使用相同高度的图像。我有
在我的活动召唤的那一刻。在其onCreate方法内部,以隐藏状态栏并以全屏模式显示。。作为向Android 30迁移的一部分,正如文档所建议的那样,我用WindowInsetsController#H
Bootstrap 显然使用了“hide”、“fade”和“in”类来进行转换。 我遇到的问题是使用“fade”和“in”会将不透明度从0更改为1。过渡效果很完美,但内容仍然占据页面上的空间,即使您看
在脱碳过程中,我现在开始使用 NSMenu 以编程方式创建菜单栏。 Carbon 似乎非常适合将标准项目添加到应用程序菜单:服务、隐藏应用程序、隐藏其他、显示全部、退出应用、甚至可以使用系统偏好设置的
我有这样的代码: Hello how are you td1 被正确隐藏,但是当 td2 被隐藏时,它
//我搜索了但没有运气,所以我开始一个新问题 :) 我有: Notification 我想要:当我点击这个 a ,它将显示/隐藏一个 div,当我在该 div 外部单击时,如果它可见,它就会隐藏。 我
Test App.js: (function() { angu
想要基于下拉(选择)隐藏或显示 AngularJS 上的元素,但由于该页面是与 QlikSense 的混搭,因此来自 Qlik 的元素不能与 ng-show 很好地配合。我用 ng-show 尝试了这
如何使下面的代码更简单、更少? 谢谢。 012 012 $('.btn div:eq(0)').click(function(){ $('.content div').hide();
我看到一些方法可以在 jQuery UI 的对话框中隐藏标题栏和标题栏中的图标,但在 jQuery Mobile 中没有。有谁知道如何在 jQuery Mobile 中做到这一点? 从对话框中删除/隐
我是一名优秀的程序员,十分优秀!