Yuvarlak kenarlı olmayan sütunlara sahip Highcharts spiderweb

Question

Sütunlu bir örümcek ağı grafiği oluşturmak istiyorum. Demo ile uğraşıyordum ve çokgen kılavuz çizgileri ve sütunları olan bir kutup çizelgesi oluşturabiliyordum. Ancak artık sütunların kenarları yuvarlak ve düz çokgen kılavuz çizgisini takip etmiyor. Yuvarlatılmış kenarlar olmadan sütunlar oluşturmak mümkün mü? Benim Kodun altında

ve benim 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

bunu yapmak için varsayılan seçeneği yoktur, ancak (here gösterildiği gibi) özel şekil tanımlayabilir ve (more about extending Highcharts) Highcharts.seriesTypes.column.prototype.translate fonksiyonunu sarabilirdiniz.

Sorun şu ki, bu işlev zaten highcharts-daha sarılmış, bu yüzden bu sarmalayıcıyı this.xAxis.isRadial = false; olarak ayarlayalım, böylece kodlar daha yüksek kodlarda daha fazla sarıcı çalışmayacak.

Örnek: 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));