Слоистые пончики Chartjs различной толщины - PullRequest
Новая
       5

Слоистые пончики Chartjs различной толщины

0 голосов
/ 29 июня 2018

Как я могу создать вложенный пончик, который имеет слои разной толщины? Chartjs позволяет только cutoutPercentage быть определенным в свойстве options, и все слои изменяются этим значением. Я хочу иметь вложенный пончик, который имеет слои разной толщины. Например, на этом графике я хочу сделать красный и синий слои различной толщины. 

var ctx = document.getElementById("chart");
var chart = new Chart(ctx, {
  type: 'doughnut',
  options: {
    cutoutPercentage: 75
  },
  data: {
    datasets: [{
        backgroundColor: [
          "red"
        ],
        data: [1]
      },
      {
        backgroundColor: [
          "blue"
        ],
        data: [1]
      }
    ]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

<canvas id="chart"></canvas>

1 Ответ

0 голосов
/ 29 июня 2018

Я нашел решение, положив две кольцевые диаграммы друг на друга. Таким образом, я смог установить разные значения cutoutPercentage. В этом примере красный и синий слои имеют разную толщину. 

var ctx = document.getElementById("chart");
var chart = new Chart(ctx, {
  type: 'doughnut',
  options: {
    cutoutPercentage: 20
  },
  data: {
    datasets: [{
      backgroundColor: [
        "red"
      ],
      data: [1]
    }]
  }
});
var ctx2 = document.getElementById("chart2");
var chart2 = new Chart(ctx2, {
  type: 'doughnut',
  options: {
    cutoutPercentage: 90
  },
  data: {
    datasets: [{
      backgroundColor: [
        "blue"
      ],
      data: [1]
    }]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

<div class="container" style="position:relative;  ">
  <canvas id="chart" style="position:absolute;"></canvas>
  <canvas id="chart2" style="position:absolute;"></canvas>
</div>
...