So i have the following directive:
angular.module('Division').directive('divisionChart', function (divisionListService) {
return {
restrict: 'E',
templateUrl: 'js/helpers/Division/directives/division-chart/division-chart.html',
replace: true,
link: function (scope, element, attr) {
function createChart() {
divisionListService.getList().then(function (result) {
var rows = [];
result.forEach(function (x) {
rows.push({
"c": [
{"v": x.id, "f": x.name},
{"v": x.parent_id >= 0 ? x.parent_id : ''}
]
})
});
var data = {
"cols": [
{"label": "Name", "pattern": "", "type": "string"},
{"label": "Manager", "pattern": "", "type": "string"},
{"label": "ToolTip", "pattern": "", "type": "string"}
],
"rows": rows
};
scope.chartObject = {
type: "OrgChart",
data: data
};
});
}
// Instantiate and draw our chart, passing in some options.
jQuery(document).ready(function () {
createChart();
});
}
}
});
And the following html:
<div class="col-xs-12">
<div id="chart_div" google-chart chart="chartObject"></div>
</div>
The data generated can be fairly large when dealing with greater organizations.
Which makes my diagram leave the screen like the image below shows:
I have tried fixing the issue by setting the width:100%
however it does not seem to do anything.
So my question is how can fix this issue?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.