Chartist.js С накоплением гистограммы с круглыми углами / краями - PullRequest
Новая
       22

Chartist.js С накоплением гистограммы с круглыми углами / краями

1 голос
/ 01 ноября 2019

Я пытаюсь создать столбчатую диаграмму со скругленными углами, где перекрывающаяся часть нижней "серии" отображается сверху верхней серии.

Это то, что я пытаюсьget

И вот что я получаю

Я попытался использовать порядок наложения с position: absolute на родительском элементе и z-index на дочерней панелиэлементы, но это не сработало.

Вот что у меня так далеко: 

const chart = new this.Chartist.Bar(".barChart",
  {
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    series: [[2, 8, 2, 4, 5, 8, 10], [13, 7, 13, 11, 10, 7, 5]]
  },
  {
    stackBars: true
  }
);

И мой css: 

  .ct-series-a {
    .ct-bar {
      stroke: url(#gradient);
      stroke-width: 1rem;
      stroke-linecap: round;
    }
  }
  .ct-series-b {
    .ct-bar {
      stroke: lightgray;
      stroke-width: 1rem;
      stroke-linecap: round;
    }
  }

Кто-нибудь делал что-нибудь подобное? Заранее спасибо!

...