Диаграмма js p ie Граница вне боковой границы - PullRequest
Новая
       13

Диаграмма js p ie Граница вне боковой границы

0 голосов
/ 29 апреля 2020

Я прошу помощи!

Мне нужно получить этот результат в графиках js

enter image description here

но я не могу понять, как я могу сделать цветную линию вдоль только одной границы (красный и черный на этом изображении).

На данный момент у меня есть именно такой код, в котором все ячейки имеют общий цвет, и все границы Ар c окрашены в другие цвета. Но в этом случае внутренние линии также становятся цветом границы, что мне не подходит (мне нужно сделать это белым): (

 

  $(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>
...