Диаграмма. js - Удалить или добавить верхнюю / нижнюю границу - PullRequest
Новая
       30

Диаграмма. js - Удалить или добавить верхнюю / нижнюю границу

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

Я использую диаграмму. js 2.9.3

У меня есть кольцевая диаграмма со следующими условиями:

  • 3 синих элемента не содержат границ
  • 1 красный элемент содержит белую рамку
  • 3 синих элемента нельзя объединить в один элемент

Проверьте прикрепленный снимок экрана:

enter image description here

Код выглядит следующим образом: 

<div style="width: 500px">
<canvas id="myChart" width="400" height="400"></canvas>
</div>


<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script>

var ctx = document.getElementById('myChart').getContext('2d');

var borderColor = 'white'
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Red', 'Blue', 'Blue', 'Blue'],

        datasets: [{
            data: [10, 1, 1, 1],
            backgroundColor: [
            'rgba(255, 0, 0, 0.7)',
            'rgba(0, 0, 255, 0.6)',
            'rgba(0, 0, 255, 0.6)',
            'rgba(0, 0, 255, 0.6)',
            ],

            borderColor: 'white',
            borderWidth: [20, 0, 0, 0]
        }]
    },
    options: {
            cutoutPercentage : 70,
            borderSkipped: 'top',
    }
});
</script>

Как можно сделать элементы красного и синего графиков одинаковой высоты?

Другими словами, я бы хотел либо

  • пропустить top и bottom границы от красного элемента
  • или добавить top и bottom границы для синих элементов.
  • или применение 0 границы для синих элементов к left и right только

Я пытался использовать borderSkipped, но это не сработало.

...