Заполните Chart.js определенным массивом JSON

В настоящее время я пытаюсь изучить Javascript, однако, похоже, я не могу исправить эту проблему:

У меня есть файл Json, заполненный данными. Мне нужны конкретные массивы за первый месяц августа (отчеты, среднее, глобальное) и вставить их (через переменную) в мою диаграмму. Итак, я получаю диаграмму с:

август

Отчетов: 7
В среднем: 25
В мире: 20

Июнь ... и т. д.

Любая помощь или советы приветствуются!

JSON Data

[{
    "month": "August",
    "reports": 7,
    "average": 25,
    "global": 20,
    "percentage": 14
}, {
    "month": "July",
    "reports": 22,
    "average": 25,
    "global": 20,
    "percentage": 44
}, {
    "month": "June",
    "reports": 12,
    "average": 25,
    "global": 20,
    "percentage": 24
}]

JS Code

window.onload = function() {

    var reports = [];

    $.getJSON("data.json", function(data) {
        reports = data;
    });


    var repaug = 7;
    var avg = 25;
    var global = 20;

    var ctx = document.getElementById("Chart1");
    var Chart1 = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ["Reports", "Average PSN", "Global Average"],
            datasets: [{
                label: '# of reports',
                data: [repaug, global, avg],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {}
    })
}

Заполните Chart.js определенным массивом JSON

javascript jquery json

28.08.2018 14:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 306

Ответы 1

Внутри datasets вы можете добавить массив, поэтому сначала вам нужно выполнить цикл для вашего ответа.

Вы можете использовать метод map() для массива.

ДЕМО

let arrayData =[{"month":"August","reports":7,"average":25,"global":20,"percentage":14},{"month":"July","reports":22,"average":25,"global":20,"percentage":44},{"month":"June","reports":12,"average":25,"global":20,"percentage":24}],
    datasets = arrayData.map(item => {
        return {
            label: `${item.month}`,
            data: [item.reports, item.average, item.global],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }
    }),
    ctx = document.getElementById("myChart").getContext('2d');

new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Reports", "Average PSN", "Global Average"],
        datasets: datasets
    },
    options: {
        responsive: true,
        legend: {
            position: 'top',
        },
        animation: {
            animateScale: true,
            animateRotate: true
        },
        tooltips: {
            callbacks: {
                label: function(item, data) {
                    let datasets = data.datasets,
                        dIndex = item.datasetIndex,
                        index = item.index;
                  
                    return `${datasets[dIndex].label} : ${data.labels[index]} : ${datasets[dIndex].data[index]}`;
                }
            }
        }
    }
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id = "myChart"></canvas>

Привет, можно ли изменить его на гистограмму?

— 18.12.2019 03:30

@ Suvin94 Не могли бы вы сообщить мне, что вам нужно в столбчатой диаграмме?

— 18.12.2019 08:50

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

— 18.12.2019 09:16

Я до сих пор не могу найти хороший учебник для составной диаграммы с базой данных laravel mysql

— 18.12.2019 09:16

Да, ты можешь. Пожалуйста, этот рабочий кодовый ключ. Это поможет вам больше настроить диаграмму с накоплением.

— 18.12.2019 11:19

Привет, сэр, вы можете мне помочь с этим stackoverflow.com/questions/59401776/…

— 19.12.2019 01:23

@ Suvin94 Пожалуйста, убедитесь, что я обновил кодовый ключ.

— 19.12.2019 05:05

28.08.2018 15:45