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/

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

1 个答案: