Я играю с Chartist.js и просто задаюсь вопросом, можете ли вы дать мне руку, применяющую некоторый стиль для SVG. Вот мой код:
JQuery
new Chartist.Line('.ct-chart', {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
series: [
[5, 9, 7, 8, 5, 3, 5, 4]
]
}, {
low: 0,
showArea: true
});
HTML:
<div class="ct-chart ct-perfect-fourth"></div>
CSS
.ct-chart .ct-series.ct-series-a .ct-area { fill: orange; }
.ct-chart .ct-series.ct-series-a .ct-line { stroke: orange; }
.ct-chart .ct-series.ct-series-a .ct-point { stroke: orange; }
body { background: #203135; }
Я просто пытаюсь имитировать то, что у них есть на этом удивительном дизайне, который я нашел на дриблинге, где каждая точка данных имеет контур более темного оттенка/подобной тени на фоне. Я попытался использовать контур в CSS, но он создает квадрат черного (или любого другого цвета, который я выбираю) вокруг точки данных, и я не могу решить, как его округлить
И, наконец, вот что у меня уже есть в jsFiddle - http://jsfiddle.net/andyjh07/gLnkwLj0/