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

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

当您在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%的固定大小并防止颜色中断。我不知道该采取什么方法,请帮助。

gopyfrb3

gopyfrb31#

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

startAngle: -140,
    endAngle: 140,
    background: [{
      backgroundColor: '0E1020',
      borderWidth: 0,
      innerRadius: '105%',
      outerRadius: '120%'
    }],
    center: ["50%", "50%"],
    size: "80%",
  },

字符串

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

相关问题