[英]Remove padding from chartist.js charts
I would like to have my chartist charts on my website with no padding from left or right. 我想在我的网站上显示我的图表图表 ,而左侧或右侧没有填充。 I am using
chartPadding: 0
as advised on several websites, but that did not really help. 我在几个网站上都建议使用
chartPadding: 0
,但这并没有真正的帮助。 There is still too much air from the left or right border. 左边界或右边界仍然有太多空气。
Here is jsFiddle . 这是jsFiddle 。 Help would be great!
帮助会很棒!
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>
You can put negative values to the chartPadding
property, but that would not give you the effect you are aiming for. 您可以将负值添加到
chartPadding
属性,但这不会为您带来chartPadding
的效果。
As you render the chart in a normal div
the default width
value is set to 100%
. 在普通
div
绘制图表时,默认width
值设置为100%
。 What you can do as a work around is to restrict the width, so there is less space for the svg
. 解决方法是限制宽度,所以
svg
空间较小。 This will affect the padding on the left/right. 这将影响左侧/右侧的填充。
Here the updated fiddle - https://jsfiddle.net/zeq3da7p/3/ 这是更新的小提琴-https: //jsfiddle.net/zeq3da7p/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.