Highcharts Spinnennetz mit Säulen ohne abgerundete Kante

Question

Ich möchte ein Spinnennetz-Diagramm mit Spalten erstellen. Ich habe an der Demo gefummelt und konnte ein Polardiagramm mit einer Polygonnetzlinie und Spalten erstellen. Jetzt sind die Kanten der Spalten jedoch rund und folgen nicht der geraden Gitterlinie. Ist es möglich, Spalten ohne die abgerundeten Kanten zu erstellen?

Unter meinen Code und meine 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

Es gibt keine Standardoption, dies zu tun, aber Sie könnten benutzerdefinierte Form definieren (wie gezeigt here) und wrap (more about extending Highcharts) Highcharts.seriesTypes.column.prototype.translate Funktion.

Das Problem ist, dass diese Funktion bereits in Highcharts-mehr verpackt ist, so dass Wrapper lassen Sie uns this.xAxis.isRadial = false; setzen, so Code in Highcharts-mehr Wrapper wird nicht ausgeführt.

Beispiel: 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));