使用jsreport在一个页面上多次呈现相同的模板

Question

我使用jsreport 使用模板绘制图表，在客户端我使用angularjs 通过API 调用jsreports 模板 我在 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>

但结果只显示一张图表

Answer 1

这样，您将两个具有相同 id 的图表 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()

Playground example online here