使用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()

这里的游乐场示例在线