所以，我对图表产生了发光的效果
但是只有第一个图表显示了效果，所有其他表都是不可见的（已加载数据但图表不可见）。
当我从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,
}
});
});
有人可以帮我吗？ 非常感谢！
最诚挚的问候，
张思达
答案 0 :(得分：0)
问题在于实施方式。让我们逐步分析正在发生的事情。
首先，您具有.highcharts-graph的CSS样式定义，其中filter: url(#glow);设置在此类的所有元素上。这意味着，两个图表系列都一直在DOM树中搜索#glow元素，并且它们在配置中都具有相同的#glow过滤器定义，因此，总的来说，DOM中有两个元素具有相同id的树。
如果在第一个图表的容器上设置display: none，它仍然存在于DOM树中，但是它的所有子元素都具有display: none，包括#glow元素。请注意，如果浏览器正在搜索具有特定id的元素，它将始终返回找到的第一个元素。
问题来源出在这里。正如您可能已经了解的那样，在第二张图表的#glow元素上设置了display: none过滤器，它具有.highcharts-graph，这就是为什么在更改图表后整个系列线都消失了的原因
最好的解决方案是更改id，使其不同（例如#glow和#glow2），然后重构CSS，如下所示：< / p>
#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/
亲切的问候！