C3.js将图例标记更改为圆形吗？

Question

我正在比较C3和NVD3。

我真的很喜欢NVD3的图例功能。 C3的传说很无聊。

如何使用C3将图例更改为Circle？

谢谢。

Answer 1

纯CSS 解决方案如何？

.c3-legend-item-tile {
  shape-rendering: auto;
  stroke-linecap: round;
  stroke-dasharray: 0.1 10;
  stroke-width: 8;
  transform: translate(6px, 1px);
}

查看实际情况：https://jsfiddle.net/Dimmy/40cubjve/

Answer 2

您可以通过选择正确的元素并更改其CSS代码（it's in the docs）来实现。 使用d3选择功能选择所需的所有层次结构：

d3.select('.container').insert('div', '.chart').attr('class', 'legend').selectAll('span')

您可以在此处看到其他一些不错的示例： https://codepen.io/lucusc/pen/GZXBxX

但基本上，请使用 legend 元素并根据需要进行自定义。