Highcharts spiderweb с колонками без закругленного края

Question

Я хотел бы создать диаграмму пауков с колоннами. Я возился с демоверсией и смог создать полярную диаграмму с полигональной сеткой и колоннами. Однако теперь края столбцов круглые и не следуют линии прямой полигоны. Можно ли создавать столбцы без закругленных краев?

Ниже мой код и мой 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-more, поэтому, чтобы обмануть эту оболочку, установите this.xAxis.isRadial = false;, поэтому код в highcharts-more wrapper не будет запущен.

Пример: 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));