[英]Chartist.js remove labels?
所以我可以display:none
標簽ex。 下面有css,但我的.ct-chart仍然在圖表的左側和底部有一些東西。 圖片如下。
.ct-labels, .ct-grids {
display: none;
}
理想情況下,藍色圖表位於白色模塊的左側,下方位於底部,因此它與div匹配,位於絕對位置,圖表響應性處於打開狀態。 我假設空白是從DOM中仍然存在的標簽創建的?
我想讓圖表左側和下側沒有空白區域。 我的.ct-chart
css看起來像這樣。
.ct-chart {
position: absolute;
width: 100%;
left: 0;
top: 0;
height: 100%;
padding: 0;
z-index: -1;
}
如果您根本不想要標簽,沒有網格線並刪除所有偏移和填充,您可以這樣做,但它需要相當多的配置:
var chart = new Chartist.Line('.ct-chart', {
labels: [1, 2, 3, 4],
series: [
[1, 4, 2, 5],
[2, 3, 1, 4]
]
}, {
showPoint: false,
showLine: false,
showArea: true,
fullWidth: true,
showLabel: false,
axisX: {
showGrid: false,
showLabel: false,
offset: 0
},
axisY: {
showGrid: false,
showLabel: false,
offset: 0
},
chartPadding: 0,
low: 0
});
是的,那些是具有x和y值偏移的svg元素。 在這里的例子中看到http://gionkunz.github.io/chartist-js/examples.html <g class =“ct-labels”> </ g>中的元素都定義了x和y偏移量來移動它們遠離父元素。 在加載圖表后用d3覆蓋這些值非常簡單。
當我加載圖表時,我想查看圖表寬度和標簽數量,如果需要,我要么顯示標簽,只顯示其他所有標簽,要么根據標簽是否適合隱藏所有標簽。 此代碼隱藏標簽:
setTimeout(function() {
$('.ct-chart').find('.ct-labels .ct-horizontal').remove();
}, 100);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.