当您在Highcharts中增加实心 Jmeter 图的窗格大小时,图表的颜色可能会在一定范围内失真。有没有办法在保持100%大小的同时防止颜色中断?
enter image description here
下面是我写的代码:
const options = {
title: {
text: null,
},
chart: {
type: "solidgauge",
backgroundColor: "transparent",
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
width: 190,
height: 190
},
tooltip: {
enabled: false,
},
credits: {
enabled: false,
},
pane: {
startAngle: -140,
endAngle: 140,
background: [{
// 이것이 안쪽 원 (inner ring)의 배경입니다.
backgroundColor: '0E1020',
borderWidth: 0,
innerRatius: '105%',
outerRadius: '120%'
}],
center: ["50%", "50%"],
size: "96%",
},
plotOptions: {
series: {
borderRadius: 20,
},
solidgauge: {
rounded: true
}
},
yAxis: {
min: 0,
max: 100,
tickPixelInterval: 100,
tickPosition: "inside",
tickLength: 5,
tickWidth: 0,
minorTickInterval: 1,
minorTickWidth: 1,
minorTickLength: 3,
minorTickPosition: 'inside',
labels: {
distance: -12,
style: {
fontSize: "10px",
color: "#8A8FA8",
},
},
lineWidth: 0,
// plotBands: [
// {
// from: 0,
// to: 100,
// color: "#1DD6A8", // green
// thickness: 20,
// },
// ],
},
series: [
{
name: "data",
data: [{
color: Highcharts.color('#083664')
.setOpacity(0.3)
.get(),
radius: '120%',
innerRadius: '105%',
y: 100,
},
{
color: '#12C283',
radius: '120%',
innerRadius: '105%',
y: reliabilityAvg,
},
{
color: '#BDCE57',
radius: '120%',
innerRadius: '105%',
y: reliabilityAvg && reliabilityAvg < 76 ? reliabilityAvg : 75,
},
{
color: '#E35B11',
radius: '120%',
innerRadius: '105%',
y: reliabilityAvg && reliabilityAvg < 51 ? reliabilityAvg : 50,
},
{
color: '#C62B3E',
radius: '120%',
innerRadius: '105%',
y: reliabilityAvg && reliabilityAvg < 26 ? reliabilityAvg : 25,
},
],
dataLabels: {
useHTML: true,
format: `<span>${Math.round(reliabilityAvg as number)}</span><span style="font-size:0.4em; color: #A1A3B9">%</span>`,
borderWidth: 0,
color: "#FFFFFF",
style: {
fontSize: "40px",
fontWeight: "bold"
},
y: -30
},
dial: {
radius: "80%",
backgroundColor: "#BEC0D1",
borderWidth: 0,
baseWidth: 10,
baseLength: "60%",
rearLength: "0%",
topWidth: 1,
},
pivot: {
backgroundColor: "gray",
radius: 6,
},
},
],
};
return reliabilityAvg && <HighchartsReact highcharts={Highcharts} options={options} />;
}
export default memo(GaugesChart)
字符串
我试图通过窗格点的className强制调整CSS,但没有成功。当我将大小设置为85%左右时,颜色显示正确,但我需要保持100%的固定大小并防止颜色中断。我不知道该采取什么方法,请帮助。
1条答案
按热度按时间gopyfrb31#
您需要调整(减少)
pane.size
。字符串
Demo:https://jsfiddle.net/BlackLabel/gsq738xh/