Festlegen des Randradius links/rechts für den Spaltenbereich in Highcharts

Question

Gibt es eine Möglichkeit, den Rahmenradius für linke/rechte Bereiche eines Spaltenbereichs festzulegen? Ich bin ziemlich nah dran, brauche aber eine leichte Anpassung, da ich für beide Seiten keinen Randradius benötige, nur einen von beiden.

Ich möchte, dass die beiden Seiten sich wie im ersten Beispiel treffen, aber KEINEN Grenzradius an den Enden, die sie treffen (so passen sie gut zusammen), anstatt sich wie der zweite Teil des ersten Beispiels zu überlappen. Hier

ist der Code:

http://jsfiddle.net/6qsvjark/600/

series: [{ 
     name: 'Task 1', 
     stack: 'Tasks', 
     data: [{ 
      x: 0, 
      low: 7, 
      high: 8 
     }, { 
      x: 1, 
      low: 6.5, 
      high: 7.75 
     }], 
     borderRadius: 10, 
     borderWidth: 0 
    }, { 
     name: 'Task 2', 
     stack: 'Tasks', 
     data: [{ 
      x: 0, 
      low: 8, 
      high: 9 
     }, { 
      x: 1, 
      low: 7.5, 
      high: 8.5 
     }], 
     borderRadius: 10, 
     borderWidth: 0 
    }] 

Answer 1

Individuelle Plugin wie erwähnt von @Matias Cerrotta funktioniert nur, nachdem es geändert wird, mit columnrange Diagrammen zu arbeiten.

JS

$(function() { 
    'use strict'; 
    (function(factory) { 
    if (typeof module === 'object' && module.exports) { 
     module.exports = factory; 
    } else { 
     factory(Highcharts); 
    } 
    }(function(Highcharts) { 
    (function(H) { 
     H.wrap(H.seriesTypes.columnrange.prototype, 'translate', function(proceed) { 
     const options = this.options; 
     const topMargin = options.topMargin || 0; 
     const bottomMargin = options.bottomMargin || 0; 

     proceed.call(this); 

     H.each(this.points, function(point) { 
      if (options.borderRadiusTopLeft || options.borderRadiusTopRight || options.borderRadiusBottomRight || options.borderRadiusBottomLeft) { 
      const w = point.shapeArgs.width; 
      const h = point.shapeArgs.height; 
      const x = point.shapeArgs.x; 
      const y = point.shapeArgs.y; 

      let radiusTopLeft = H.relativeLength(options.borderRadiusTopLeft || 0, w); 
      let radiusTopRight = H.relativeLength(options.borderRadiusTopRight || 0, w); 
      let radiusBottomRight = H.relativeLength(options.borderRadiusBottomRight || 0, w); 
      let radiusBottomLeft = H.relativeLength(options.borderRadiusBottomLeft || 0, w); 

      const maxR = Math.min(w, h)/2 

      radiusTopLeft = radiusTopLeft > maxR ? maxR : radiusTopLeft; 
      radiusTopRight = radiusTopRight > maxR ? maxR : radiusTopRight; 
      radiusBottomRight = radiusBottomRight > maxR ? maxR : radiusBottomRight; 
      radiusBottomLeft = radiusBottomLeft > maxR ? maxR : radiusBottomLeft; 

      point.dlBox = point.shapeArgs; 

      point.shapeType = 'path'; 
      point.shapeArgs = { 
       d: [ 
       'M', x + radiusTopLeft, y + topMargin, 
       'L', x + w - radiusTopRight, y + topMargin, 
       'C', x + w - radiusTopRight/2, y, x + w, y + radiusTopRight/2, x + w, y + radiusTopRight, 
       'L', x + w, y + h - radiusBottomRight, 
       'C', x + w, y + h - radiusBottomRight/2, x + w - radiusBottomRight/2, y + h, x + w - radiusBottomRight, y + h + bottomMargin, 
       'L', x + radiusBottomLeft, y + h + bottomMargin, 
       'C', x + radiusBottomLeft/2, y + h, x, y + h - radiusBottomLeft/2, x, y + h - radiusBottomLeft, 
       'L', x, y + radiusTopLeft, 
       'C', x, y + radiusTopLeft/2, x + radiusTopLeft/2, y, x + radiusTopLeft, y, 
       'Z' 
       ] 
      }; 
      } 

     }); 
     }); 
    }(Highcharts)); 
    })); 
    window.chart1 = new Highcharts.Chart({ 

    chart: { 
     renderTo: 'container1', 
     type: 'columnrange', 
     inverted: true 
    }, 

    title: { 
     text: "Top Chart" 
    }, 

    xAxis: { 
     categories: ['Customer A', 'Customer B'] 
    }, 


    legend: { 
     enabled: true 
    }, 

    plotOptions: { 
     columnrange: { 
     grouping: false, 


     } 
    }, 

    series: [{ 
     name: 'Task 1', 
     stack: 'Tasks', 
     borderRadiusBottomLeft: 10, 
     borderRadiusBottomRight: 10, 
     data: [{ 
     x: 0, 
     low: 7, 
     high: 8 
     }, { 
     x: 1, 
     low: 6.5, 
     high: 7.75 
     }], 

    }, { 
     name: 'Task 2', 
     stack: 'Tasks', 
     borderRadiusTopLeft: 10, 
     borderRadiusTopRight: 10, 
     data: [{ 
     x: 0, 
     low: 8, 
     high: 9 
     }, { 
     x: 1, 
     low: 7.5, 
     high: 8.5 
     }], 

    }] 

    }); 

    window.chart2 = new Highcharts.Chart({ 

    chart: { 
     renderTo: 'container2', 
     type: 'columnrange', 
     inverted: true 
    }, 

    title: { 
     text: "Bottom Chart" 
    }, 

    xAxis: { 
     categories: ['Customer A', 'Customer B'] 
    }, 


    legend: { 
     enabled: true 
    }, 

    series: [{ 
     name: 'Data', 
     data: [{ 
     x: 0, 
     low: 7, 
     high: 8 
     }, { 
     x: 0, 
     low: 8, 
     high: 9, 
     color: "#202020" 
     }, { 
     x: 1, 
     low: 6.5, 
     high: 7.5 
     }, { 
     x: 1, 
     low: 7.5, 
     high: 8.5, 
     color: "#202020" 
     }] 
    }] 

    }); 

}); 

Fiddle Demonstration