javascript - 在 Highcharts 中为列范围设置左/右边框半径

Question

有没有办法为列范围的左/右区域设置边框半径？我非常接近，但需要稍微调整一下，因为我不需要两边的边界半径，每边只需要一个。

我希望两侧像第一个示例一样相遇，但在它们相遇的末端没有边界半径(因此它们很好地匹配)，而不是像第一个示例的第二部分那样重叠。

代码如下:

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

@Matias Cerrotta 提到的自定义插件只有在修改后才能与 columnrange 图表一起使用。

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示范