highcharts - 图表上的 HighCharts 发光效果不影响多个图表
问题描述
所以，我正在为图表制作发光效果
但只有第一个图表显示效果，所有其他表格都是不可见的（数据已加载但图表不可见）。
当我从 css 中注释掉发光效果部分时，一切又变得顺利了。
所有其他图表具有完全相同的设置，但不知何故（#glow）不适用于其他三个图表。你能帮帮我吗？非常感谢！
这是我从中获取过滤器代码设置的链接：url（#glow）：
http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/css/shadow/
这是我重现问题的链接：
http://jsfiddle.net/x6eg4ka7/20/
//JavaScript
$("#First").on("click", function (event) {
document.getElementById("container2").style.display = "none";
var BTCstockChart = Highcharts.stockChart('container', {
time: {
timezone: 'America/New_York'
},
chart: {
styledMode: true
},
yAxis: {
title: {
text: 'Price',
style: {
color: '#FFF'
}
},
labels: {
style: {
color: '#b5ffb5'
}
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
},
labels: {
style: {
color: '#b5ffb5'
}
}
},
rangeSelector: {
allButtonsEnabled: true,
inputEnabled: false,
buttonSpacing: 8,
labelStyle: {
color: '#f7d3d3'
},
buttons: [{
type: 'day',
count: 1,
text: '1D',
events: {
click: function () {
BTCstockChart.series[0].update({
data: [
[1562558400000, 70.9],
[1562559400000, 10],
[1562560400000, 50.9],
[1562561400000, 20.9],
[1562562400000, 100.9],
[1562563400000, 40.9],
[1562564400000, 60.9],
[1562565400000, 29.9]
]
},true);
}
}
},{
type: 'day',
count: 3,
text: '3D',
events: {
click: function () {
BTCstockChart.series[0].update({
data: [
[1562558400000, 74.9],
[1562559400000, 1],
[1562560400000, 30.9],
[1562561400000, 25.9],
[1562562400000, 29.9],
[1562563400000, 58.9],
[1562564400000, 29],
[1562565400000, 68.90]
]
},true);
}
}
}, {
type: 'all',
text: 'All',
events: {
click: function () {
BTCstockChart.series[0].update({
data: [
[1562558400000, 29.9],
[1562559400000, 50],
[1562560400000, 80.9],
[1562561400000, 100.9],
[1562562400000, 10.9],
[1562563400000, 30.9],
[1562564400000, 50.9],
[1562565400000, 29.9]
]
},true);
}
}
}]
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'middle'
},
plotOptions: {
series: {
turboThreshold: 4000
//label: {
// boostThreshold: 1,
// connectorAllowed: false
//}
}
},
series: [{
name: 'Bitcoin',
data: [
[1562558400000, 29.9],
[1562559400000, 50],
[1562560400000, 80.9],
[1562561400000, 100.9],
[1562562400000, 10.9],
[1562563400000, 30.9],
[1562564400000, 50.9],
[1562565400000, 29.9]
]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
},
defs: {
glow: {
tagName: 'filter',
id: 'glow',
opacity: 0.1,
children: [{
tagName: 'feGaussianBlur',
result: 'coloredBlur',
stdDeviation: 2.5
}, {
tagName: 'feMerge',
children: [{
tagName: 'feMergeNode',
in: 'coloredBlur'
}, {
tagName: 'feMergeNode',
in: 'SourceGraphic'
}]
}]
}
},
credits: {
enabled: false,
}
});
});
$("#Second").on("click", function (event) {
document.getElementById("container").style.display = "none";
var ETHstockChart = Highcharts.stockChart('container2', {
time: {
timezone: 'America/New_York'
},
chart: {
styledMode: true
},
yAxis: {
title: {
text: 'Price',
style: {
color: '#FFF'
}
},
labels: {
style: {
color: '#b5ffb5'
}
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
},
labels: {
style: {
color: '#b5ffb5'
}
}
},
rangeSelector: {
allButtonsEnabled: true,
inputEnabled: false,
buttonSpacing: 8,
labelStyle: {
color: '#f7d3d3'
},
buttons: [{
type: 'day',
count: 1,
text: '1D',
events: {
click: function () {
ETHstockChart.series[0].update({
data: [
[1562558400000, 70.9],
[1562559400000, 10],
[1562560400000, 50.9],
[1562561400000, 20.9],
[1562562400000, 100.9],
[1562563400000, 40.9],
[1562564400000, 60.9],
[1562565400000, 29.9]
]
},true);
}
}
},{
type: 'day',
count: 3,
text: '3D',
events: {
click: function () {
ETHstockChart.series[0].update({
data: [
[1562558400000, 74.9],
[1562559400000, 1],
[1562560400000, 30.9],
[1562561400000, 25.9],
[1562562400000, 29.9],
[1562563400000, 58.9],
[1562564400000, 29],
[1562565400000, 68.90]
]
},true);
}
}
}, {
type: 'all',
text: 'All',
events: {
click: function () {
ETHstockChart.series[0].update({
data: [
[1562558400000, 29.9],
[1562559400000, 50],
[1562560400000, 80.9],
[1562561400000, 100.9],
[1562562400000, 10.9],
[1562563400000, 30.9],
[1562564400000, 50.9],
[1562565400000, 29.9]
]
},true);
}
}
}]
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'middle'
},
plotOptions: {
series: {
turboThreshold: 4000
//label: {
// boostThreshold: 1,
// connectorAllowed: false
//}
}
},
series: [{
name: 'Bitcoin',
data: [
[1562558400000, 29.9],
[1562559400000, 50],
[1562560400000, 80.9],
[1562561400000, 100.9],
[1562562400000, 10.9],
[1562563400000, 30.9],
[1562564400000, 50.9],
[1562565400000, 29.9]
]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
},
defs: {
glow: {
tagName: 'filter',
id: 'glow',
opacity: 0.1,
children: [{
tagName: 'feGaussianBlur',
result: 'coloredBlur',
stdDeviation: 2.5
}, {
tagName: 'feMerge',
children: [{
tagName: 'feMergeNode',
in: 'coloredBlur'
}, {
tagName: 'feMergeNode',
in: 'SourceGraphic'
}]
}]
}
},
credits: {
enabled: false,
}
});
});
有人可以帮我吗？非常感谢！
此致，
张四达
解决方案
问题在于实施方式。让我们一步一步分析正在发生的事情。
首先，您有 的 CSS 样式定义.highcharts-graph，其中filter: url(#glow);设置了该类的所有元素。也就是说，这两个图表系列都一直在#glowDOM 树中搜索元素，并且它们#glow在配置中都有相同的过滤器定义，所以总的来说，DOM 树中有两个元素具有相同的id.
如果display: none在第一个图表的容器上设置 ，它仍然存在于 DOM 树中，但它的所有子元素也是 have display: none，包括#glow元素。请注意，如果浏览器正在搜索带有 specific 的元素id，它总是返回第一个找到的元素。
问题的根源来了。正如您可能已经理解的那样，#glow具有 的过滤器display: none设置在第二个图表的.highcharts-graph元素上，这就是为什么整个系列线在更改图表后立即消失的原因。
最好的解决方案是更改id's，使它们不同（例如#glowand #glow2），并重构 CSS，如下所示：
#container .highcharts-graph {
filter: url(#glow);
fill: none;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
#container2 .highcharts-graph {
filter: url(#glow2);
fill: none;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
现场示例：http: //jsfiddle.net/BlackLabel/qv4d3rax/
亲切的问候！
推荐阅读
- windows - 在 windows 上运行命令不允许引用
- c# - Blazor 模板内的两种方式数据绑定
- javascript - 在 MVC 应用程序上更新动态 css 样式表
- pandas - 在一行中追加多行
- node.js - 使用 Docker compose 和 volumes 持久化上传的图片目录
- laravel-5 - 无法从 laravel 5.1 中的表单提交 GET 请求中获取输入数据
- firebase - firebase premession 奇怪的错误
- python - 计算所有 LSTM 时间步的损失，然后预测部分数据
- javascript - 如何在浏览器之外的 HTML 中块显示？
- c++ - 交换二维数组的 C++ 执行时间