在chartist.js中为SVG数据点添加大纲

我正在玩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：

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/

Answer 1

您可以用元素替换数据点默认的 元素。 这样您就可以控制圆形笔触颜色，宽度和填充颜色。

DEMO

 var chart = new Chartist.Line('.ct-chart', { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], series: [ [5, 9, 7, 8, 5, 3, 5, 4, 9, 23], ] }, { low: 0, showArea: true, lineSmooth: Chartist.Interpolation.simple({ divisor: 2 }), }); chart.on('draw', function(data) { if (data.type === 'point') { var circle = new Chartist.Svg('circle', { cx: [data.x], cy: [data.y], r: [7], }, 'ct-circle'); data.element.replace(circle); } });