2017-09-18 67 views
0

我希望我的網站上有我的chartist charts,沒有填充左側或右側的填充。我在幾個網站上建議使用chartPadding: 0,但這並沒有真正的幫助。左側或右側邊界的空氣依然過多。從chartist.js圖表​​中刪除填充

這裏是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>

回答

0

你可以把負值的chartPadding財產,但這種方法不會給你,你的目標的效應。

當您在正常的div中渲染圖表時,默認的width值設置爲100%。你可以做的工作是限制寬度,所以svg的空間較少。這將影響左側/右側的填充。

這裏更新的小提琴 - https://jsfiddle.net/zeq3da7p/3/

+0

謝謝,我已經嘗試了已經有幾個寬度,但因爲這是響應圖表獲得在這裏和那裏冒出。但至少它看起來比以前好一點。感謝您的幫助和時間! – vloryan