Javascript 在图表列表下方对齐标签
我有一个页面,其中包含使用ChartList()生成的图表 在图表下方,有一些标签。由于标签的长度,我需要旋转标签 我已经能够通过一些css实现这一点:Javascript 在图表列表下方对齐标签,javascript,css,chartist.js,Javascript,Css,Chartist.js,我有一个页面,其中包含使用ChartList()生成的图表 在图表下方,有一些标签。由于标签的长度,我需要旋转标签 我已经能够通过一些css实现这一点: .ct-chart .ct-label.ct-horizontal.ct-end { transform: translate(-15px, 15px) rotate(315deg); white-space: nowrap; } 然而,我现在面临一个问题:当标签太长时,其中一部分会被“切掉” 我创建了一个JSFIDLE来演示这个问题
.ct-chart .ct-label.ct-horizontal.ct-end {
transform: translate(-15px, 15px) rotate(315deg);
white-space: nowrap;
}
然而,我现在面临一个问题:当标签太长时,其中一部分会被“切掉”
我创建了一个JSFIDLE来演示这个问题:
标签是隐藏的,因为溢出会影响
svg
元素,并且标签会从原点移动。按如下方式更新您的css:
.ct-chart-bar {
overflow: visible;
margin : 0 0 30px 0;
}
.ct-chart .ct-label.ct-horizontal.ct-end {
position: relative;
justify-content: flex-end;
text-align: right;
transform-origin: 100% 0;
transform: translate(-100%) rotate(-45deg);
white-space:nowrap;
}
下面是更新的JSFIDLE您可以向svg父级添加和省略号以及填充,即使标签太长,您也可以像示例中那样添加省略号
.ct-chart .ct-label.ct-horizontal.ct-end {
transform: translate(-15px, 15px) rotate(315deg);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
width: 50px !important;
}
我通过添加边距
margin:0 30px 0来完成@xxxmatko答案
到.ct图表栏
css类
整个解决方案是:
.ct-chart-bar {
overflow: visible;
margin : 0 0 30px 0;
}
.ct-chart .ct-label.ct-horizontal.ct-end {
position: relative;
justify-content: flex-end;
text-align: right;
transform-origin: 100% 0;
transform: translate(-100%) rotate(-45deg);
white-space:nowrap;
}
致以最良好的祝愿 根据@Mohamed Bathaoui添加了
边距