Question

我在仪表图中使用绘图带来表示角度范围。但是当“from”值高于“to”值时，我遇到了绘图带角度的问题。

如您所见，绘图带设置为from: 270, to: 45但实际上它被渲染为好像被设置为from: 45, to: 270。这恰好提供了我需要的对角度范围。

我能找到的唯一方法是设置两个绘图带，一个从270到360，另一个从0到45，但这似乎非常不方便。

有没有简单的方法来实现我想要做的事情？

Answer 1

正如我在评论中提到的，我认为您应该能够在代码中覆盖getPlotBand方法，以启用从到值大于到值的plotBands：

 (function(H) {
    H.wrap(H.Axis.prototype, 'init', function(proceed, chart, userOptions) {
      this.getPlotBandPath = function(from, to, options) {
        var center = this.center,
          startAngleRad = this.startAngleRad,
          pick = H.pick,
          map = H.map,
          pInt = H.pInt,
          fullRadius = center[2] / 2,
          radii = [
            pick(options.outerRadius, '100%'),
            options.innerRadius,
            pick(options.thickness, 10)
          ],
          offset = Math.min(this.offset, 0),
          percentRegex = /%$/,
          start,
          end,
          open,
          isCircular = this.isCircular, // X axis in a polar chart
          ret;
        // Polygonal plot bands
        if (this.options.gridLineInterpolation === 'polygon') {
          ret = this.getPlotLinePath(from).concat(this.getPlotLinePath(to, true));

          // Circular grid bands
        } else {

          // Keep within bounds
          from = Math.max(from, this.min);
          to = Math.min(to, this.max);

          // Plot bands on Y axis (radial axis) - inner and outer radius depend on to and from
          if (!isCircular) {
            radii[0] = this.translate(from);
            radii[1] = this.translate(to);
          }

          // Convert percentages to pixel values
          radii = map(radii, function(radius) {
            if (percentRegex.test(radius)) {
              radius = (pInt(radius, 10) * fullRadius) / 100;
            }
            return radius;
          });

          // Handle full circle
          if (options.shape === 'circle' || !isCircular) {
            start = -Math.PI / 2;
            end = Math.PI * 1.5;
            open = true;
          } else {
            start = startAngleRad + this.translate(from);
            end = startAngleRad + this.translate(to);
          }

          radii[0] -= offset; // #5283
          radii[2] -= offset; // #5283

          ret = this.chart.renderer.symbols.arc(
            this.left + center[0],
            this.top + center[1],
            radii[0],
            radii[0], {
              start: start, // Math is for reversed yAxis (#3606)
              end: end,
              innerR: pick(radii[1], radii[0] - radii[2]),
              open: open
            }
          );
        }

        return ret;
      }
      proceed.call(this, chart, userOptions);
    });
  }(Highcharts))

实例：

http://jsfiddle.net/2Ljk7usL/9/

Highcharts：测量图表中的情节带

1 个答案: