Charts 绘图仪区域剪切文本
我有以下绘图代码:Charts 绘图仪区域剪切文本,charts,plotly,Charts,Plotly,我有以下绘图代码: var element = document.getElementById(scope.changeid); function getData(division,redraw) { var employeeData = []; if (!division) { $http.get(api.getUrl('competenceUserAverageByMyD
var element = document.getElementById(scope.changeid);
function getData(division,redraw) {
var employeeData = [];
if (!division) {
$http.get(api.getUrl('competenceUserAverageByMyDivisions', null)).success(function (response) {
processData(response,redraw);
});
}
else {
$http.get(api.getUrl('competenceUserAverageByDivision', division)).success(function (response) {
processData(response,redraw);
})
}
}
function processData(data,redraw) {
var y = [],
x1 = [],
x2 = [];
data.forEach(function (item) {
y.push(item.user.profile.firstname);
x1.push(item.current_level);
x2.push(item.expected);
});
var charData = [{
x: y,
y: x1,
type: 'bar',
name: $filter('translate')('COMPETENCES.GRAPH.CURRENT'),
marker: {
color: '#23b7e5'
}
}, {
x:y,
y:x2,
type: 'bar',
marker: {
color: '#f05050'
},
name: $filter('translate')('COMPETENCES.GRAPH.EXPECTED')
}],
layout = {
title: $filter('translate')('USERMANAGEMENT.USERS'),
barmode: 'stack',
legend: {
traceorder: 'reversed'
}
};
Plotly.newPlot(element,charData,layout);
}
scope.$watch('divisionId', function (newValue, oldValue) {
if (newValue) {
getData(newValue.id,true);
}
}, true);
getData(null,false);
这将生成以下图表:
<div class="panel-body">
<h4 class="text-center">{{'COMPETENCES.GRAPH_TITLES.OVERVIEW_GAP' | translate}}</h4>
<vertical-bar-chart id="chartArea" goto="competence.titleCompetenceDetails"
changeid="chartArea" xcolumn="xColumn" y-column="yColumn"
dataset="dataSet"
has-addition="true"
style="width: 80%; text-align: center"></vertical-bar-chart>
</div>
正如您可能知道的,文本x列被无意中切断。所以我的问题是如何避免这种情况?我试图增加元素的高度,但没有任何运气:
正如你在这里看到的:
哦,你说不出来,因为背景是白色的,但面板主体的高度是1000像素,但它仍然会将其切断。尝试在layout.margin.b中增加底部边距。plotlyjs中的更多信息。作为参考,我遇到了同样的问题,边距底部没有帮助,但在创建图形之后,我运行了以下JQuery,它显示了隐藏的文本:
var heightincrease = $('#yourID').find('.svg-container').height() + 100;
$('#yourID').find('.svg-container').height(heightincrease).find('.main-svg').height(heightincrease);
显然,根据需要调整以显示整个图表。可能会中断重新调整大小,因此需要工作,如果这是一个问题