JSReport - диаграмма не отображается с динамическими значениями - PullRequest
Новая
       5

JSReport - диаграмма не отображается с динамическими значениями

0 голосов
/ 26 ноября 2018

Я могу получать данные через REST API, используя JSReport Script.Я могу отобразить круговую диаграмму, используя шаблонизатор (рецепт: html, engine: handlebars) с жестко заданными значениями.Теперь мне нужно передать динамические данные из скрипта JSreport в движок шаблонов.Я не уверен, как это сделать.

Script 

async function prepareDataSource() {
    const extracts = await fetchStats() . // REST API Call
   // console.log(extracts.data);
    let arr = extracts.data
     let statsbySale = d3.nest()
                .rollup(function(d) {
                    return {
                    A : d3.sum(d, function (g) { return g.a; }),
                    B : d3.sum(d, function (g) { return g.b; }),
                    C : d3.sum(d, function (g) { return g.c; }),
                    D : d3.sum(d, function (g) { return g.d; })
                };
                }).object(arr);
                console.log(JSON.stringify(statsbySale)); ==> returns ["A" : 10, "B" : 20, "C" : 30, "D" : 40]
                return (JSON.stringify(statsbySale))
}


async function beforeRender(req, res, done) {
     req.data.sales = await prepareDataSource()
     console.log(req.data.sales======>Printed the same JSON object as above
     done();
}

==================================

Template engine

<script>
    Chart.defaults.global.legend.display = false;
    new Chart(document.getElementById('myChart').getContext("2d"),            
        type: 'pie',
        data: {
             labels: ['A', 'B', 'C', 'D'],
             datasets: [{
                  backgroundColor: [
                      'green',
                      'orange',
                      'yellow',
                      'purple'
                  ]                
                  borderColor: "rgba(27,161,226,1)",
                  borderWidth: 1,
                  hoverBackgroundColor: "rgba(27,161,226,0.4)",
                  hoverBorderColor: "rgba(27,161,226,1)",
                  data: [10,20,30,40] ===>Hardcoded value
                }]
        },
        options: {
             animation: {
                 duration:            
             }
        }
});
</script>

Как передать динамическое значение из файла Script в движок шаблонов, чтобы правильно отобразить диаграмму.

1 Ответ

0 голосов
/ 26 ноября 2018

Решение можно найти здесь .

Вам необходимо сериализовать данные json с помощью настраиваемого помощника движка шаблонов и записать их во встроенный скрипт.

Определить настраиваемый помощник 

function toJSON(data) {
  return JSON.stringify(data);
}

Записать данные во встроенный скрипт 

<script>
  var data = {{{toJSON sales}}}
  ... your chart using data
</script>
...