Как сравнить одно значение с другим в chartJS - PullRequest
Новая
       8

Как сравнить одно значение с другим в chartJS

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

Я работал на веб-сайте управления широкополосной связью. Я хочу показать пользователю, сколько данных он / она использовал. Например, если общее количество данных, которые они имеют в своем имени, составляет 300 ГБ. Если они использовали 150 ГБ, оставшиеся 150 ГБ, верно? Как сделать это с помощью кольцевой диаграммы? Использование диаграммы JS.

У меня есть код, но я не уверен, как это сделать sh, пожалуйста, помогите мне 

    var ctx = document.getElementById('myChart').getContext('2d');
var constdata=document.getElementById("constantdata").textContent;
var data=document.getElementById("data").textContent;
console.log(data);
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'doughnut',

    // The data for our dataset
    data: {
        datasets: [{
            label: 'My First dataset',
            backgroundColor: ['red','green'],
            borderColor: 'rgb(255, 99, 132)',
            data: [300,150] //300 being the total data,150 being the data used
        }]
    },

    // Configuration options go here
    options: {}

Но приведенный выше код не работает. Считайте кольцевую диаграмму, если используются данные 150 ГБ (из 300). Пончиковая диаграмма должна быть похожа на изображение1 (см. Изображение 1)

Но я получаю изображение 2 (см. Изображение 2)

https://i.stack.imgur.com/nFTym.png // изображение 1

https://i.stack.imgur.com/MG99s.png // изображение 2

1 Ответ

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

Предполагая, что используемые данные должны отображаться красным цветом, data следует определить следующим образом: 

data: [used, total - used]

Пожалуйста, ознакомьтесь с измененным примером кода ниже. 

const total = 300;
const used = 100;

var chart = new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: {
    datasets: [{
      label: 'My First dataset',
      backgroundColor: ['red', 'green'],
      borderColor: 'rgb(255, 99, 132)',
      data: [used, total - used]
    }]
  },
  options: {}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="90"></canvas>
...