Диаграмма не отображается с мопсом / нефритом и nodejs - PullRequest
Новая
       22

Диаграмма не отображается с мопсом / нефритом и nodejs

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

Я пытаюсь (около недели !!) отрисовать диаграмму, которая отлично работает с жестко закодированными метками, но с моими метками (данными) из MySQL она показывает только пустую страницу.

Однако, если я укажу на мои метки console.log, он покажет мне все данные, отправленные из моей БД, которые я хочу поместить в качестве меток на свой график.

В моем индексе . js: 

router.get('/api', function (req, res) {
    axios.get('http://localhost:3000/projetos/quantos/ci')
        .then(dados =>{
            const d = dados.data;
            var labelsx = [];
            for(var i = 0; i < d.length; i++){
                labelsx.push(d[i].Nome);
            }
            console.log(labelsx);

            var datax = [];
            for(var j = 0; j < d.length; j++){
                datax.push(d[j].QuantosHa)
            }
            console.log(datax);
            res.render('chart',
                {title: "chart",
                 datai: JSON.stringify(datax),
                 labeli: labelsx
                })
        })
        .catch(erro => {e: erro});
});

My chart.pug : 

extends layout

block content
    script(src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js")


    div
        each l in labeli
            ul=l

        div
            .chart-container
            canvas#chartPic
            script.
                var ctx = document.getElementById("chartPic").getContext('2d');
                ctx.canvas.parentNode.style.width = '50%';
                var idata = #{datai};
                var chart = new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: [],
                        datasets: [{
                            data: idata,
                            backgroundColor: ['red', 'green', 'blue', 'pink', 'black'],
                            borderColor: ['green', 'blue', 'red', 'black', 'pink'],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        title: {
                            display: true,
                            text: "top 5 centros com mais projetos"
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                });

Если я поставлю, например, ["one", "two", "three", «четыре», «пять»] в поле меток моего графика без проблем отображается, а также то, что «каждый л в этикетке» работает просто отлично, но каждый раз, когда я пытаюсь передать его на свой график, страница становится пустой, как это:

Result when I try to put my labels in my chart Если я скажу, что он показывает код мопса, я получу диаграмму: enter image description here

Может ли кто-нибудь мне помочь? Заранее благодарим за любые ваши предложения!

1 Ответ

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

Внутри index. js, вы не должны конвертировать datax в string, а просто передать оригинал array. Удалите JSON.stringify из блока кода ниже. 

res.render('chart',
    { title: "chart",
      datai: JSON.stringify(datax),
      labeli: labelsx
    })

Это должно выглядеть следующим образом. 

res.render('chart',
    { title: "chart",
      datai: datax,
      labeli: labelsx
    })

ОБНОВЛЕНИЕ

В chart.pug вы забыли определить labels. Вместо пустого массива вы должны изменить код следующим образом. 

var chart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: #{labeli}, // <- make this change
...