Chartjs pie chart out side border

问题

I ask for help!

I need get this result in chartsjs

but I can’t understand how i can make a color line along only one border (red and black in this image).

At the moment, I have just such a code, in which all cells have a common color, and all borders of arc are painted in other colors. But in this case, the internal lines also become the color of the border, which does not suit me (i need do it white) :(

 

  $(document).ready(function () {
  var ctx = document.getElementById("chartjs-1").getContext("2d");
  var chart = new Chart(ctx, {
    type: "pie",
    data: {
      labels: ["Green", "Blue", "Gray", "Purple"],
      datasets: [
        {
          backgroundColor: ["#F1F1F1", "#F1F1F1", "#F1F1F1", "#F1F1F1"],
          hoverBackgroundColor: ["#F1F1F1", "#F1F1F1", "#F1F1F1", "#F1F1F1"],
          borderColor: ["#FF0000", "#000000", "#F2994A", "#56CCF2"],
          data: [12, 19, 3, 17],
        },
      ],
    },

    options: {
      elements: {
        arc: {
          borderWidth: 5,
          borderColor: "white",
          borderAlign: "left",
        },
      },
      legend: {
        display: false,
      },
      legendCallback: function (chart) {
        console.log(chart.data);
        var text = [];
        text.push("<ul>");
        for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
          text.push("<li>");
          text.push(
            '<span style="background-color:' +
              chart.data.datasets[0].borderColor[i] +
              '">' +
              chart.data.datasets[0].data[i] +
              "</span>"
          );
          if (chart.data.labels[i]) {
            text.push(chart.data.labels[i]);
          }
          text.push("</li>");
        }
        text.push("</ul>");
        return text.join("");
      },
    },
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

<canvas id="chartjs-1"></canvas>

来源：https://stackoverflow.com/questions/61502108/chartjs-pie-chart-out-side-border

标签

javascript

chart.js