我们正在使用多kpi测量仪highchart(solid gauge),这里我们面临一个背景边界阴影的问题。由于缺乏阴影效果,背景看起来非常透明。
的数据我们需要这样的效果,但我们无法达到这种效果。
的背景是非常轻的,因为它看起来像没有它的轨道。
njthzxwz1#
不幸的是,与其他系列(如Pie Solid Gauge)不同,它没有可以定义阴影的阴影属性。但是,您可以使用render函数来实现这一点,在该函数中,您可以通过SVGRenderer生成2个圆:
Highcharts.chart('container', { chart: { ... events: { render: function() { const chart = this, center = chart.pane[0].center, x = chart.plotLeft + center[0], y = chart.plotTop + center[1], r = chart.pane[0].axis.axisGroup.element.getBBox().width / 2 - 1, smallestRadius = chart.series.reduce((minRadius, currentSeries) => { const currentRadius = parseInt(currentSeries.data[0].radius); return currentRadius < minRadius ? currentRadius : minRadius; }, Infinity), smallR = r - (smallestRadius / 100) * r; if(!chart.paneBackground) { chart.paneBackground = chart.renderer.circle().attr({ fill: '#fff', }).add().shadow({ color: 'black', width: 10 }); } chart.paneBackground.attr({ x: x, y: y, r: r }) if(!chart.paneInnerBackground) { chart.paneInnerBackground = chart.renderer.circle().attr({ fill: '#fff', zIndex: 6, }).add().shadow({ color: 'black', width: 10 }); } chart.paneInnerBackground.attr({ x: x, y: y, r: smallR }) } } } ... });
字符串演示:https://jsfiddle.net/BlackLabel/16tfarc9/API:https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle
1条答案
按热度按时间njthzxwz1#
不幸的是,与其他系列(如Pie Solid Gauge)不同,它没有可以定义阴影的阴影属性。
但是,您可以使用render函数来实现这一点,在该函数中,您可以通过SVGRenderer生成2个圆:
字符串
演示:https://jsfiddle.net/BlackLabel/16tfarc9/
API:https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle