使用jsreport在一个页面上多次呈现同一模板
Rendering same template multiple time on one page using jsreport
我使用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>
但结果只显示了一个图表
通过这种方式,您可以将两个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()
游乐场示例在线此处
相关文章:
- 在指令控制器中使用$attrs时出现问题
- 如何使用jQuery自动打开页面上的所有链接
- 如何使用url加载程序在webpack中导入多个图像
- 使用php或javascript从facebook相册URL中删除多余的部分
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 如何使用jquery在填充自动完成的值后使文本框只读
- 使用agility.js进行页面布局和合成
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何使用WCF服务和javascript表单post上传.doc文件
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 如何使用动画实现纸张推车
- 如何在Angular2中使用jQuery插件
- 使用Express捕获参数
- 使用clickToggle并在单击另一个元素时关闭元素
- 如何使用jQuery选择下拉列表的值
- 使用jsreport在一个页面上多次呈现同一模板
- 将图像放入使用jsReport生成的pdf中
- 将JSreport与其他语言(非英语)一起使用
- Jsreport-core:使用带有幻影pdf收据的头文件