向 chartist.js 中的 SVG 数据点添加轮廓

Question

我正在研究 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; }

我只是想模拟他们在我在 dribbble 上发现的这个很棒的设计上的内容，其中每个数据点都有一个较暗的 shade/similar 阴影轮廓到背景。我曾尝试在 CSS 中使用轮廓，但它会在数据点周围生成一个黑色正方形（或我选择的任何颜色），我不知道如何将其四舍五入

最后，这是我在 jsFiddle 中已有的内容 - http://jsfiddle.net/andyjh07/gLnkwLj0/

Answer 1

您可以用 <circle> 元素替换数据点默认的 <line> 元素。这样就可以控制圆圈的描边颜色、宽度和填充颜色了。

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);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.7.2/chartist.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.7.2/chartist.min.css" rel="stylesheet" />
<style>
  .ct-chart .ct-series.ct-series-a .ct-area {fill: orange;}
  .ct-chart .ct-series.ct-series-a .ct-line {stroke: orange;stroke-width: 3px;}
  .ct-circle {fill: orange;stroke-width: 5;stroke: #203135;}
  body {background: #203135;}
</style>
<div class="ct-chart ct-perfect-fourth"></div>

参考：http://gionkunz.github.io/chartist-js/examples.html#using-events-to-replace-graphics

向 chartist.js 中的 SVG 数据点添加轮廓

Add outline to SVG data point in chartist.js

javascript

css

jquery

svg

chartist.js