堆叠条形图中的边界半径 chartist.js

Question

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

我尝试在我的 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/

堆叠条形图中的边界半径 chartist.js

border-radius in stacked bar graph chartist.js

javascript

chartist.js