Есть ли способ в диаграмме пончик. JS, чтобы показать% из 100 - PullRequest
Новая
       35

Есть ли способ в диаграмме пончик. JS, чтобы показать% из 100

1 голос
/ 30 марта 2020

У меня есть кольцевая диаграмма, показывающая число. Однако есть ли способ, которым кольцевая диаграмма может быть из 100%, поэтому число, которое я даю в разделе data: скажем, 21, покажет 21% завершения из 100?

Изображение для покажите желаемый результат: donut chart

Таким образом, кольцо пончика закрашено серым цветом, а цветная часть - это количество выполненного задания (или какое число мы выделяем для раздела data, я Вы просматривали документацию и не видите, как это можно сделать?

Код, который у меня сейчас есть: 

<canvas id="Chart1" style="width=5 height=5"></canvas>
<?php
    $var = 3;
?>

    var ctx = document.getElementById('Chart1').getContext('2d');
    var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'doughnut',

    // The data for our dataset
        data: {
            labels: ['% Complete'],
            datasets: [{
                label: 'chart1',
                backgroundColor: 'rgb(102, 178, 255)',
                borderColor: 'rgb(102, 178, 255)',
                // Below I just pull out 1 number from the db
                data: [<?php echo $var ?>] 
            }]
        },
    });

Мой код выводит нижеприведенное (так 3 заполняет весь пончик), в то время как я хотел бы, чтобы 3% из 100% были завершены.

chart

Ответы [ 2 ]

2 голосов
/ 30 марта 2020

Попробуйте передать данные [3, 97]. Вы пытаетесь использовать его в качестве индикатора загрузки, но, похоже, он предназначен для отображения 100% вещей, разбитых на части.

Если вы просто передадите [3], то это 100% вашего набора данных

1 голос
/ 30 марта 2020

Создайте набор данных из двух значений, например: 

[percent_value, 100-percent_value]

Вот полная демонстрация: 

const originalDoughnutDraw = Chart.controllers.doughnut.prototype.draw;

Chart.helpers.extend(Chart.controllers.doughnut.prototype, {
  draw: function() {
    const chart = this.chart;
    const {
      width,
      height,
      ctx,
      config
    } = chart.chart;

    const {
      datasets
    } = config.data;

    const dataset = datasets[0];
    const datasetData = dataset.data;
    const completed = datasetData[0];
    const text = `${completed}% completed`;
    let x, y, mid;

    originalDoughnutDraw.apply(this, arguments);

    const fontSize = (height / 350).toFixed(2);
    ctx.font = fontSize + "em Lato, sans-serif";
    ctx.textBaseline = "top";


    x = Math.round((width - ctx.measureText(text).width) / 2);
    y = (height / 1.8) - fontSize;
    ctx.fillStyle = "#000000"
    ctx.fillText(text, x, y);
    mid = x + ctx.measureText(text).width / 2;
  }
});


var context = document.getElementById('myChart').getContext('2d');
var percent_value = 3;
var chart = new Chart(context, {
  type: 'doughnut',
  data: {
    labels: ['Completed', 'Pending'],
    datasets: [{
      label: 'First dataset',
      data: [percent_value, 100 - percent_value],
      backgroundColor: ['#00baa6', '#ededed']
    }]
  },
  options: {}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart"></canvas>
...