javascript - 圆 Angular 变成矩形？

Question

目前，我在 c3.js 中生成的图表图例是颜色矩形，我想将其更改为圆形。我该怎么做？

var chart = c3.generate({
  data: {
      columns: [
          ['data1', 30],
          ['data2', 120],
      ],
      type : 'donut',
      onclick: function (d, i) { console.log("onclick", d, i); },
      onmouseover: function (d, i) { console.log("onmouseover", d, i); },
      onmouseout: function (d, i) { console.log("onmouseout", d, i); },
      label:true,
  },
  donut: {
      title: "Iris Petal Width",
       label: {
       /*format: function(value, ratio, id)
       {
         return d3.format('')(value)
       },*/
       show: false
      }
  }
});

Plunker

Answer 1

有一种方法(可怕？!)可以做你想做的事:

CSS 更改:

.c3-legend-item-tile {
  stroke-linecap: round;
}

JS 变化:

const legendTiles = document.getElementsByClassName('c3-legend-item-tile');
for (const tile of legendTiles) {
    const x1 = tile.getAttribute('x1');
    tile.setAttribute('x2', x1);
}

参见this Plunker