0

есть идея хранить графики в json-файле вида

{
    "1": {
        "name": "график1",
        
        "points": [0, 10, 5, 2, 20, 30, 45]
    },
    "2": {
        "name": "график2",
        
        "points": [1, 2, 5, 2, 23, 10, 7]
    }
}

не могу понять, как их отобразить на странице. Проблема в том, что в коде ниже canvas еще не создан и сразу всунуть в него график я не могу

 $.getJSON('1.json', (data) => {
        let out = ''
        for (const key in data) {
            if (data.hasOwnProperty(key)) {
                
                out +=  `<div class="card" style="width: 18rem">
                <div class="card-body">
                  ${key.name}
                </div>
                <canvas id = ${key}></canvas>
                </div>` 
}}

а после создания карточек с canvas не знаю как к ним обратиться и на каждой нарисовать свой график.

2
  • событие на загрузку документа => запрос => оброботка и вставка
    – Armen
    3 дек 2020 в 1:15
  • спасибо, но я новичек, не знаю как это реализовать.. понял, что если в файлах инфу хранить надо node.js почитать, этим и занялся..
    – bruderDima
    5 дек 2020 в 12:47

2 ответа 2

0

забуть про ранее данный ответ ты же должен забрать данные которые в .json сохранил тоесть сделать запрос вот простой пример пример

//тема промисы + метод fetch + асинхронность + как бонус макрозадачи и микрозадачи(или задачи)
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then((json) => {
    // это асинхронный код он по любому выполнится после всего остального синхронного кода
    canvas = document.querySelector('your canvas selector')
    //... 
  })
1
  • Арсен, спасибо, ваш код работает, но вопрос дальше..
    – bruderDima
    6 дек 2020 в 18:40
0
$('document').ready(function () {
    loadCards() // при загрузке страницы выполняю функцию загрузки данных из json

})

// загрузка данных из json
async function loadCards() {
    fetch('1.json')
        .then(response => response.json())
        .then((json) => {
            let out = ''
            for (let key in json) {
                // создаю строку html с именами графиков из json и пустым канвасом для рисования
                out += `<div>${key}</div>                
            <canvas class = 'canvasClass' id = "${key}"></canvas>`
            }
            // вывожу пустые места под графики на страницу
            $('.container').html(out)
            // делаю цикл по канвасам на странице и отрисовываю там графики. не знаю как в data передать точки из json
            let elements = document.querySelectorAll('canvas.canvasClass')
            for (const elem in elements) {
                if (elements.hasOwnProperty(elem)) {
                    
                    const ctx = document.getElementById(elements[elem].id).getContext('2d')
                    const chart = new Chart(ctx, {
                        // The type of chart we want to create
                        type: 'bar',

                        // The data for our dataset
                        data: {
                            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                            datasets: [{
                                label: 'My First dataset',
                                backgroundColor: 'rgb(255, 99, 132)',
                                borderColor: 'rgb(255, 99, 132)',
                                data: [1, 2, 3, 4, 5]
                            }],
                            // Configuration options go here
                            options: {}
                        }
                    })
                }
            }

        })

вот этот код работает у меня, но data: [1, 2, 3, 4, 5] я задаю явно, и не знаю как загрузить data из файла json

1
  • если речь идет о том как сделать из json => обект то JSON.parse('your json')
    – Armen
    6 дек 2020 в 19:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.