Question

我想创建一个带有列的spiderweb图表。我正在摆弄演示，并能够创建一个带有多边形网格线和列的极坐标图。但是现在列的边缘是圆的，并且不遵循直的多边形网格线。是否可以创建没有圆边的列？

在我的代码下面和我的jsfiddle：fiddle

$(function () {

$('#container').highcharts({

    chart: {
        polar: true
    },

    title: {
        text: 'Highcharts Polar Chart'
    },

    pane: {
        startAngle: 0,
        endAngle: 360
    },

    xAxis: {
        tickInterval: 45,
        lineWidth: 0,
        min: 0,
        max: 360,
        labels: {
            formatter: function () {
                return this.value + '°';
            }
        }
    },

    yAxis: {
        gridLineInterpolation: 'polygon',
                    lineWidth: 0,
        min: 0
    },

    plotOptions: {
        series: {
            pointStart: 0,
            pointInterval: 45
        },
        column: {
            pointPadding: 0,
            groupPadding: 0
        }
    },

    series: [{
        type: 'column',
        name: 'Column',
        data: [8,1, 6, 5, 4, 3, 2, 1],
        pointPlacement: 'between'
    }]
});

}）;

Answer 1

没有默认选项可以执行此操作，但您可以定义自定义形状（如图所示here）并包装（more about extending Highcharts）Highcharts.seriesTypes.column.prototype.translate功能。

问题是这个函数已经包含在highcharts中了，所以为了欺骗那个包装器让我们设置this.xAxis.isRadial = false;，所以在highcharts-more包装器中的代码将不会运行。

示例：http://jsfiddle.net/3fdeq741/

  // Define a custom symbol path
  Highcharts.SVGRenderer.prototype.symbols.cutArc = function(x, y, w, h, options) {
    var start = options.start,
      radius = w,
      end = options.end,
      innerRadius = options.innerR,
      open = options.open,
      cosStart = Math.cos(start),
      sinStart = Math.sin(start),
      cosEnd = Math.cos(end),
      sinEnd = Math.sin(end);

    return [
      'M',
      x + radius * cosStart,
      y + radius * sinStart,
      'L',
      x + radius * cosEnd,
      y + radius * sinEnd,
      'L',
      x + innerRadius * cosEnd,
      y + innerRadius * sinEnd,
      'Z'
    ];
  };
  if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.cutArc = Highcharts.SVGRenderer.prototype.symbols.cutArc;
  }

  (function(H) {
    H.wrap(H.seriesTypes.column.prototype, 'translate', function(proceed) {
      //avoid running wrapper from highcharts-more
      var temp = this.xAxis.isRadial;
      this.xAxis.isRadial = false;

      // Run original proceed method
      proceed.apply(this, [].slice.call(arguments, 1));
      this.xAxis.isRadial = temp;

      //run this instead of highcharts-more wrapper
      var xAxis = this.xAxis,
        len = this.yAxis.len,
        center = xAxis.center,
        startAngleRad = xAxis.startAngleRad,
        renderer = this.chart.renderer,
        start,
        points,
        point,
        i;

      if (xAxis.isRadial) {
        points = this.points;
        i = points.length;
        while (i--) {
          point = points[i];
          start = point.barX + startAngleRad;
          point.shapeType = 'path';
          point.shapeArgs = {
            d: renderer.symbols.cutArc(
              center[0],
              center[1],
              len - point.plotY,
              null, {
                start: start,
                end: start + point.pointWidth,
                innerR: len - H.pick(point.yBottom, len)
              }
            )
          };
          // Provide correct plotX, plotY for tooltip
          this.toXY(point);
          point.tooltipPos = [point.plotX, point.plotY];
          point.ttBelow = point.plotY > center[1];
        }
      }
    });
  }(Highcharts));

Highcharts spiderweb与没有圆边的列

1 个答案: