[英]Remove padding from chartist.js charts
我想在我的網站上顯示我的圖表圖表 ,而左側或右側沒有填充。 我在幾個網站上都建議使用chartPadding: 0
,但這並沒有真正的幫助。 左邊界或右邊界仍然有太多空氣。
這是jsFiddle 。 幫助會很棒!
var chart = Chartist.Bar('.ct-chart', { labels: ['1.58', '2.58', '4.58', '5.2', '3.1'], series: [ [12, 9, 7, 8, 5], [2, 1, 3.5, 7, 3], [1, 3, 4, 5, 6] ] }, { showPoint: true, showLine: true, fullWidth: true, showLabel: false, axisX: { showGrid: false, showLabel: true, offset: 50 }, axisY: { showGrid: false, showLabel: false, offset: 0 }, chartPadding: 0, low: 0 }); // Listening for draw events that get emitted by the Chartist chart chart.on('draw', function(data) { // If the draw event was triggered from drawing a point on the line chart if(data.type === 'label' && data.axis === 'x') { // We just offset the label X position to be in the middle between the current and next axis grid data.element.attr({ dx: data.x + data.space / 2 }); } });
<link href="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.css" rel="stylesheet"/> <script src="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.js"></script> <div class="ct-chart"></div>
您可以將負值添加到chartPadding
屬性,但這不會為您帶來chartPadding
的效果。
在普通div
繪制圖表時,默認width
值設置為100%
。 解決方法是限制寬度,所以svg
空間較小。 這將影響左側/右側的填充。
這是更新的小提琴-https: //jsfiddle.net/zeq3da7p/3/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.