在Highcharts的solidgauge中,颜色在一定范围内会中断

6jygbczu  于 2023-11-19  发布在  Highcharts
关注(0)|答案(1)|浏览(202)

当您在Highcharts中增加实心 Jmeter 图的窗格大小时,图表的颜色可能会在一定范围内失真。有没有办法在保持100%大小的同时防止颜色中断?
enter image description here
下面是我写的代码:

  1. const options = {
  2. title: {
  3. text: null,
  4. },
  5. chart: {
  6. type: "solidgauge",
  7. backgroundColor: "transparent",
  8. plotBackgroundColor: null,
  9. plotBackgroundImage: null,
  10. plotBorderWidth: 0,
  11. plotShadow: false,
  12. width: 190,
  13. height: 190
  14. },
  15. tooltip: {
  16. enabled: false,
  17. },
  18. credits: {
  19. enabled: false,
  20. },
  21. pane: {
  22. startAngle: -140,
  23. endAngle: 140,
  24. background: [{
  25. // 이것이 안쪽 원 (inner ring)의 배경입니다.
  26. backgroundColor: '0E1020',
  27. borderWidth: 0,
  28. innerRatius: '105%',
  29. outerRadius: '120%'
  30. }],
  31. center: ["50%", "50%"],
  32. size: "96%",
  33. },
  34. plotOptions: {
  35. series: {
  36. borderRadius: 20,
  37. },
  38. solidgauge: {
  39. rounded: true
  40. }
  41. },
  42. yAxis: {
  43. min: 0,
  44. max: 100,
  45. tickPixelInterval: 100,
  46. tickPosition: "inside",
  47. tickLength: 5,
  48. tickWidth: 0,
  49. minorTickInterval: 1,
  50. minorTickWidth: 1,
  51. minorTickLength: 3,
  52. minorTickPosition: 'inside',
  53. labels: {
  54. distance: -12,
  55. style: {
  56. fontSize: "10px",
  57. color: "#8A8FA8",
  58. },
  59. },
  60. lineWidth: 0,
  61. // plotBands: [
  62. // {
  63. // from: 0,
  64. // to: 100,
  65. // color: "#1DD6A8", // green
  66. // thickness: 20,
  67. // },
  68. // ],
  69. },
  70. series: [
  71. {
  72. name: "data",
  73. data: [{
  74. color: Highcharts.color('#083664')
  75. .setOpacity(0.3)
  76. .get(),
  77. radius: '120%',
  78. innerRadius: '105%',
  79. y: 100,
  80. },
  81. {
  82. color: '#12C283',
  83. radius: '120%',
  84. innerRadius: '105%',
  85. y: reliabilityAvg,
  86. },
  87. {
  88. color: '#BDCE57',
  89. radius: '120%',
  90. innerRadius: '105%',
  91. y: reliabilityAvg && reliabilityAvg < 76 ? reliabilityAvg : 75,
  92. },
  93. {
  94. color: '#E35B11',
  95. radius: '120%',
  96. innerRadius: '105%',
  97. y: reliabilityAvg && reliabilityAvg < 51 ? reliabilityAvg : 50,
  98. },
  99. {
  100. color: '#C62B3E',
  101. radius: '120%',
  102. innerRadius: '105%',
  103. y: reliabilityAvg && reliabilityAvg < 26 ? reliabilityAvg : 25,
  104. },
  105. ],
  106. dataLabels: {
  107. useHTML: true,
  108. format: `<span>${Math.round(reliabilityAvg as number)}</span><span style="font-size:0.4em; color: #A1A3B9">%</span>`,
  109. borderWidth: 0,
  110. color: "#FFFFFF",
  111. style: {
  112. fontSize: "40px",
  113. fontWeight: "bold"
  114. },
  115. y: -30
  116. },
  117. dial: {
  118. radius: "80%",
  119. backgroundColor: "#BEC0D1",
  120. borderWidth: 0,
  121. baseWidth: 10,
  122. baseLength: "60%",
  123. rearLength: "0%",
  124. topWidth: 1,
  125. },
  126. pivot: {
  127. backgroundColor: "gray",
  128. radius: 6,
  129. },
  130. },
  131. ],
  132. };
  133. return reliabilityAvg && <HighchartsReact highcharts={Highcharts} options={options} />;
  134. }
  135. export default memo(GaugesChart)

字符串
我试图通过窗格点的className强制调整CSS,但没有成功。当我将大小设置为85%左右时,颜色显示正确,但我需要保持100%的固定大小并防止颜色中断。我不知道该采取什么方法,请帮助。

gopyfrb3

gopyfrb31#

您需要调整(减少)pane.size

  1. startAngle: -140,
  2. endAngle: 140,
  3. background: [{
  4. backgroundColor: '0E1020',
  5. borderWidth: 0,
  6. innerRadius: '105%',
  7. outerRadius: '120%'
  8. }],
  9. center: ["50%", "50%"],
  10. size: "80%",
  11. },

字符串

Demo:https://jsfiddle.net/BlackLabel/gsq738xh/

展开查看全部

相关问题