在 chartist.js 中为 SVG 数据点添加轮廓

Posted 2023-03-06

【中文标题】在 chartist.js 中为 SVG 数据点添加轮廓

【英文标题】：Add outline to SVG data point in chartist.js

【发布时间】：2015-04-27 05:31:38

【问题描述】：

我正在使用 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 上发现的这个很棒的设计中的内容，其中每个数据点都有一个较暗阴影/与背景类似的阴影的轮廓。我曾尝试在 CSS 中使用轮廓，但它会在数据点周围产生一个黑色正方形（或我选择的任何颜色），我无法弄清楚如何将其四舍五入

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

【问题讨论】：

即使涉及复制行，这是否适合您jsfiddle.net/webtiki/gLnkwLj0/10 ？

@web-tiki 我确实想到了这一点，图表可能有多个数据集（彩色线），所以我只需要为每个数据集的数据提供两次，不是吗？这会对加载时间等产生任何影响还是会很小？

在您的情况下（假设您不需要显示大量行）我认为加载时间不会受到显着影响。关键是它不是“干净的”。

I have recreated this on Codepen，享受吧。

做得很好，感谢您的链接。 Chart JS 在这方面做得很好

【参考方案1】：

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

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

【讨论】：

那，完美。非常感谢！

有一些全局方法可以做到这一点吗？似乎非常奇怪的是，他们一开始就没有使用circle，因为它的代码更少，更容易定制......

我最终只是更改了point = seriesElement...的源代码

@vsync 你有指向 jsFiddle 的链接或任何要显示的东西吗？

@AndyHolmes 我有 jsbin，有我自己的实现，check it out