Рендеринг одного и того же шаблона несколько раз на одной странице с использованием jsreport

Я использую jsreport для рисования диаграмм с использованием шаблонов, на стороне клиента я использую angularjs для вызова шаблонов jsreports через API. У меня есть следующий шаблон в jsreport.

шаблон

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>   
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.css" rel="stylesheet">


<div id="district-bar-chart"></div>
<div id="tehsil-bar-chart"></div>
<div id="chart-bar-ucPopulation"></div>
<script>
    var data = {{#toJSON this}}{{/toJSON}}
    // console.log(data)
    var mylable = data.x
    var ndx = crossfilter(data.data);
    // var mycustomlabel = crossfilter(data.x)
    var test =0;
    var districtDim = ndx.dimension(function(d) { return d[mylable]; });
    var districtcount = districtDim.group().reduceCount();
    // var districts = districtcount.all();
    // for(var i=0; i<districts.length;i++){
    //     console.log(districts[i]);
    // }
    // var minDistPop=0;
    // var maxDistPop=0;
    // var districtPopulation = districtDim.group().reduceSum(function(d){return Number(d["Target Population (IDIMS)"]);});
    // var distPop = districtPopulation.all();
    // for(var j=0; j<distPop.length;j++){
    //     console.log(distPop[j]);
    //     if(maxDistPop<Number(distPop[j].value)){
    //         maxDistPop = Number(distPop[j].value);
    //     }
    //     if(maxDistPop>Number(distPop[j].value)){
    //         minDistPop = Number(distPop[j].value);
    //     }
    // }
    // console.log(minDistPop);
    // console.log(maxDistPop);
    var distBarChart = dc.barChart('#district-bar-chart');
    distBarChart.width(500)
    .height(300)
    .gap(20)
    .dimension(districtDim)
    .group(districtcount)
    .yAxisLabel(".",50)
    .x(d3.scale.ordinal().domain(districtDim))
    .xUnits(dc.units.ordinal)
    // .y(d3.scale.linear().domain([0,maxDistPop+50000]))
     .elasticY(true)
     .renderHorizontalGridLines(true)
     .renderTitle(true)
     .brushOn(true);
     dc.renderAll();
</script>

ДАННЫЕ

{
                "x" : "tableName",
                "data":
    [{"apiLength":8330,"columnsMigrated":8330,"id":0,"url":"http://58.65.177.12/api_who/api/get_alllocation/5468XE2LN6CzR7qRG041/","tableName":"tmp_alllocations","error":"null","description":"tmp_alllocationsupdated in 11.601seconds with 8330 rows","lastMigration":"Thu Mar 10 2016 20:00:37 GMT+0500 (Pakistan Standard Time)","timeTakenSec":"11.601"},{"apiLength":8330,"columnsMigrated":8330,"id":0,"url":"http://58.65.177.12/api_who/api/get_alllocation/5468XE2LN6CzR7qRG041/","tableName":"tmp_alllocations","error":"null","description":"tmp_alllocationsupdated in 11.276seconds with 8330 rows","lastMigration":"Thu Mar 10 2016 20:02:26 GMT+0500 (Pakistan Standard Time)","timeTakenSec":"11.276"},{"apiLength":8330,"columnsMigrated":8330,"id":0,"url":"http://58.65.177.12/api_who/api/get_alllocation/5468XE2LN6CzR7qRG041/","tableName":"tmp_alllocations","error":"null","description":"tmp_alllocationsupdated in 10.032seconds with 8330 rows","lastMigration":"Thu Mar 10 2016 20:04:10 GMT+0500 (Pakistan Standard Time)","timeTakenSec":"10.032"},{"apiLength":8330,"columnsMigrated":8330,"id":0,"url":"http://58.65.177.12/api_who/api/get_alllocation/5468XE2LN6CzR7qRG041/","tableName":"tmp_alllocations","error":"null","description":"tmp_alllocationsupdated in 15.128seconds with 8330 rows","lastMigration":"Thu Mar 10 2016 20:06:15 GMT+0500 (Pakistan Standard Time)","timeTakenSec":"15.128"}]
    }

помощник

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

В контроллере AngularJS мой код

$scope.dcharts = []
$scope.deliberatelyTrustDangerousSnippet= function (remoteHTML) {
      // $scope.dcharts.push($sce.trustAsHtml(remoteHTML).typeof)
        return $sce.trustAsHtml(remoteHTML);
    }
 
$scope.drawgraph = function (data, templateID) {
            var settings = {
                "async": true,
                "crossDomain": true,
                //      "responseType":'arraybuffer', //for pdf
                "url": "http://localhost:3001/api/report",
                "method": "POST",
                "headers": {
                    "content-type": "application/json",
                    "cache-control": "no-cache"
                },
                "processData": false,
                "data": {
                    "template": {
                        "shortid": templateID,
                        "recipe": 'html'
                    },
                    // "data": data,
                    "options": {
                        "reports": {
                            "save": false
                        }
                    }
                }
            }
            $http(settings).then(function (responce) {
                $scope.graphtml = responce.data
                
                  $scope.dcharts.push($scope.graphtml)
            })
        } //drawgraph()

         $scope.drawgraph(mygraphdata, "4JfXr7BZZ")
         $scope.drawgraph(mygraphdata, "4JfXr7BZZ")
<div class="row">
       <div ng-repeat="mychart in dcharts" class="col-md-4" ng-bind-html="deliberatelyTrustDangerousSnippet(mychart)"></div>
        </div>

Но результат показывает только один график

1 ответ

Таким образом, вы помещаете два div диаграммы с одним и тем же идентификатором в html-документ, а диаграмма d3 затем рисует только первый.

Одним из решений является запись отчета HTML в iframe. Второе - сделать div id уникальным.

Второе решение довольно простое

содержание шаблона:

<div id={{randomOnce}} /></div>

<script>
    document.getElementById('{{randomOnce}}').innerHTML = 'yes it works'
</script>

помощник шаблона:

function randomOnce() {
  return number     
}
var number = new Date().getTime()

Пример игровой площадки онлайн здесь

Другие вопросы по тегам