ZingChart仪表盘仅显示首尾分段，中间分段缺失的技术问题求助

Let's jump straight to the root of your issue: you’re using individual value percentages instead of cumulative percentages for your ring and plot rules. This makes your middle segments so narrow (only a few percent of the total gauge) that they’re practically invisible to the naked eye.

Here’s the Corrected Implementation #

First, we’ll adjust how we calculate cumulative percentages, then update the rules to use these proper ranges:

$(document).ready(function() {
  window.feed = function(callback) {
    var tick = {};
    tick.plot0 = Math.ceil(350 + (Math.random() * 500));
    callback(JSON.stringify(tick));
  };
  d = [150, 200, 250, 300, 400];
  let sum = d.reduce(function(a, b) {
    return a + b;
  }, 0);
  
  // Calculate cumulative percentages instead of individual ones
  let cumulativePerc = 0;
  const colourArray = ["#11d8ee", "#3cc457", "#f12b0e", "#dda522"];
  const arrRingRules = [];

  for (let i = 0; i < colourArray.length; i++) {
    const individualPerc = (d[i] / sum) * 100;
    const prevCumulative = cumulativePerc;
    cumulativePerc += individualPerc;
    
    arrRingRules.push({
      rule: `%v >= ${prevCumulative.toFixed(2)} && %v < ${cumulativePerc.toFixed(2)}`,
      backgroundColor: colourArray[i]
    });
  }

  // Build plot rules using the same cumulative ranges
  const arrPlotRules = [
    {
      rule: '%v >= 0 && %v < 11.54',
      text: '%v<br>EXCELLENT'
    },
    {
      rule: '%v >= 11.54 && %v < 26.92', // 11.54 + 15.38
      text: '%v<br>Good'
    },
    {
      rule: '%v >= 26.92 && %v < 46.15', // 26.92 + 19.23
      text: '%v<br>Fair'
    },
    {
      rule: '%v >= 46.15 && %v < 69.23', // 46.15 + 23.08
      text: '%v<br>Bad'
    },
    // Optional: cover remaining gauge space
    {
      rule: '%v >= 69.23',
      text: '%v<br>Very Bad',
      backgroundColor: '#333'
    }
  ];

  var myConfig = {
    type: "gauge",
    globals: {
      fontSize: 25
    },
    plotarea: {
      marginTop: 80
    },
    plot: {
      size: '100%',
      valueBox: {
        placement: 'center',
        text: '%v',
        fontSize: 35,
        rules: arrPlotRules
      }
    },
    tooltip: {
      borderRadius: 5
    },
    scaleR: {
      aperture: 180,
      values: "0:100:20",
      center: {
        visible: false
      },
      tick: {
        visible: false
      },
      item: {
        offsetR: 0,
        rules: [{
          rule: '%i == 9',
          offsetX: 15
        }]
      },
      labels: ['0', '20', '40', '60', '80', '100'],
      ring: {
        size: 100,
        rules: arrRingRules
      }
    },
    series: [{
      values: [80], // starting value
      backgroundColor: 'black',
      indicator: [10, 10, 10, 10, 0.75],
      animation: {
        effect: 2,
        method: 1,
        sequence: 4,
        speed: 900
      },
    }]
  };

  zingchart.render({
    id: 'myChart',
    data: myConfig,
    height: 500,
    width: '100%'
  });
})

html, body {
  height: 100%;
  width: 100%;
}
#myChart {
  height: 100%;
  width: 100%;
  min-height: 150px;
}
.zc-ref {
  display: none;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
  <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
</body>
</html>

Key Fixes Explained #

1. Cumulative Percentage Tracking: Instead of storing individual value percentages, we maintain a running total (cumulativePerc). This ensures each rule’s range spans from the end of the previous segment to the end of the current one, making each segment’s width proportional to its corresponding value in the d array.

2. Widen Middle Segments: The middle segments now use valid cumulative ranges (e.g., 11.54 to 26.92 instead of 11.54 to 15.38). These wider ranges are clearly visible on the 180-degree gauge.

3. Full Gauge Coverage (Optional): I added an extra rule for values above 69.23 to cover the remaining 30% of the gauge, preventing uncolored empty space since your first 4 values only make up ~69% of the total sum.

Why Your Original Code Failed #

Your original rules used individual value percentages for the upper bounds of each range. For example, the second segment only spanned 11.54 to 15.38 (a mere 3.84% of the total gauge), which translates to less than 7 degrees on your 180-degree aperture—way too small to see clearly. By switching to cumulative percentages, each segment gets the proper width it deserves.

内容的提问来源于stack exchange，提问作者Premlatha