让我们从最后开始，我想让我的柱形图看起来像这样：

这是非常容易使用chart.js信用：https://devsheet.com/code-snippet/bar-chart-with-circular-shape-from-corner-in-chartjs/
我读过这个问题：Highcharts: is it possible to set up top border radius for the columns in Column chart?建议使用该软件包：“highcharts-border-radius”。但这个包可以使圆角，但它将是硬编码的，例如，我改变了topLeft和topRight角有border-radius，那么当我将有负值，它会看起来很可怕：

我在纯javascript中找到了一个解决方案：http://jsfiddle.net/BlackLabel/vd2Ly9eh/

$(function() {
  Highcharts.wrap(Highcharts.seriesTypes.column.prototype, 'translate', function(proceed) {
    proceed.apply(this, [].slice.call(arguments, 1));
    var series = this,
      cpw = 0.166,
      shapeArgs,
      x, y, h, w;

    Highcharts.each(series.points, function(point) {
      shapeArgs = point.shapeArgs;
      x = shapeArgs.x;
      y = shapeArgs.y;
      h = shapeArgs.height;
      w = shapeArgs.width;

      point.shapeType = 'path';
      if (point.negative) {
        point.shapeArgs = {
          d: [
            'M', x, y,
            'L', x, y + h - w / 2,
            'C', x, y + h + w / 5, x + w, y + h + w / 5, x + w, y + h - w / 2, 'L', x + w, y,
            'L', x, y
          ]
        };
      } else {
        point.shapeArgs = {
          d: [
            'M', x, y + w / 2,
            'L', x, y + h,
            'L', x + w, y + h,
            'L', x + w, y + w / 2,
            'C', x + w, y - w / 5, x, y - w / 5, x, y + w / 2
          ]
        };
      }
    });
  });

  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    series: [{
      data: [2, 3, -2, 3, 2]
    }]
  });
});

但是我不知道如何在React中解决这个问题。所以我想得到帮助如何在React中用Highcharts制作这样的柱形图。
先谢了