堆叠条形图中的边框半径图表师.js

Question

我正在尝试将边框半径添加到我的图表堆叠条形图，但仅限于第一个和最后一个项目。

我试图在我的 css 应用程序上添加一个 ：first-child 选择器，但它效果不佳。

Javascript：

var versions = [
  {
    data:[22],
    className: 'stacked-bars content-0'
  },
  {
    data:[103],
    className: 'stacked-bars content-1'
  },
  {
    data:[95],
    className: 'stacked-bars content-2'
  }
];
var chartistStack = new Chartist.Bar('#chartist-stack', {
      series : versions
    },{
      horizontalBars: true,
      stackBars: true,
      reverseData: true,
      height: '200px',
      width: '80%',
      chartPadding: {
        left: 200
      },
      axisX: {
        showGrid: false,
        showLabel: false
      },
      axisY: {
        showGrid: false,
        showLabel: false
      }
    }
);

.CSS：

.content-0 {
    stroke: green;
    color: green;
}
.content-1 {
    stroke: red;
    color: red;
}
.content-2 {
    stroke: blue;
    color: blue;
}
.stacked-bars > .ct-bar {
    stroke-width: 20px;
}

https://codepen.io/luizzdea/pen/ErVwKd

Answer 1

如果您没有找到答案：由于这是一个 SVG，您可以使用以下内容：

.stacked-bars:first-child,
.stacked-bars:last-child {
   stroke-linecap: round
}

引用：

1） https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

2） https://css-tricks.com/almanac/properties/s/stroke-linecap/