- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试图在仪表内部实现某种发光效果,但只能在外部实现。我还尝试在仪表内的圆圈/背景上添加发光效果,但它隐藏在绿色/橙色区域下方。
非常感谢任何帮助。
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
marginTop: 0
},
title: {
text: false,
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function(labelWidth) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{
outerRadius: '88%',
innerRadius: '70%',
backgroundColor: 'white',
borderWidth: 0
}]
},
plotOptions: {
solidgauge: {
animation: false,
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false,
rounded: true
}
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
series: [{
name: 'Something',
data: [{
color: '#e76a0b',
radius: '112%',
innerRadius: '88%',
y: 100,
borderColor: '#e76a0b'
}, {
color: '#007272',
radius: '112%',
innerRadius: '88%',
y: 40,
borderColor: '#007272'
}]
}]
});
.highcharts-series-group {
filter: url(#glow)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="container" style="width: 400px; height: 400px; margin: 0 auto">
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 300 300">
<defs>
<filter id="glow" x="-5000%" y="-5000%" width="10000%" height="10000%">
<feFlood result="flood" flood-color="#000" flood-opacity=".2"></feFlood>
<feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
<feMorphology in="mask" result="dilated" operator="dilate" radius="3"></feMorphology>
<feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur>
<feMerge>
<feMergeNode in="blurred"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
</svg>
最佳答案
基于@GrzegorzBlachliński 的回答的完整解决方案。
为了创建可缩放的阴影,您可以在重绘和加载事件中根据图表的大小计算其大小。
const chart = Highcharts.chart('container', {
chart: {
type: 'solidgauge',
marginTop: 50,
events: {
load () {
const chart = this
const el = document.querySelector('.highcharts-tracker > path.highcharts-point')
const {x, y, width, height } = el.getBBox()
chart.shadow = chart
.renderer.image('http://i.imgur.com/frVkXOh.png', x+10, y+50, width, height)
.attr({ zIndex: 10 })
.add()
},
redraw () {
const chart = this
const el = document.querySelector('.highcharts-tracker > path.highcharts-point')
const {x, y, width, height } = el.getBBox()
chart.shadow.attr({ x: x+10, y: y + 50, width, height })
}
}
},
title: {
text: 'Activity',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function(labelWidth) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: []
},
plotOptions: {
solidgauge: {
animation: false,
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false,
rounded: true
}
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
series: [{
name: 'Something',
data: [{
color: '#e76a0b',
radius: '112%',
innerRadius: '88%',
y: 100,
borderColor: '#e76a0b'
}, {
color: '#007272',
radius: '112%',
innerRadius: '88%',
y: 40,
borderColor: '#007272'
}]
}]
})
关于javascript - 在 Highcharts 中,如何在 solidgauge 中创建发光/阴影效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44648087/
我目前正在使用 highcharts 实心仪表制作圆环图。 我希望蓝色系列是 3D 的。我也希望绿色系列是 3D 的。我该怎么做呢? 如果这是不可能的,那么我希望红色系列是条纹的,这样它就不是实心的。
https://jsfiddle.net/7cbymps6/ tooltip: { positioner: function () { if(true)
早上好/晚上好!我一天中的大部分时间都在研究这个但无济于事,所以是时候吸引更多的观众了...... 我正在使用包装在 ExtJS 4.2.2 容器类中的 Highcharts“solidgauge”图
我按照这个例子来理解 solidgauge 图表是如何工作的: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highchart
我想知道是否可以在“solidGauge”图表的右侧设置一个从左侧绿色(0 值)开始、中间渐变为黄色然后渐变为红色的渐变。 我在 yAxis 中尝试了一些配置,但它们没有按照我的要求进行:
我使用 react-highcharts 在我的仪表板页面中创建一个 SolidGauge。 并绘制圆边。 因此,我将 plotOptions.rounded 设置为 true。 代码: import
我试图在仪表内部实现某种发光效果,但只能在外部实现。我还尝试在仪表内的圆圈/背景上添加发光效果,但它隐藏在绿色/橙色区域下方。 非常感谢任何帮助。 Highcharts.chart('containe
我是一名优秀的程序员,十分优秀!