从chartist.js图表​​中删除填充

Question

我希望在我的网站上使用 chartist 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>

Answer 1

您可以将负值添加到chartPadding属性中，但这不会为您提供所针对的效果。

当您以正常div呈现图表时，默认width值设置为100%。你可以做的解决方法是限制宽度，因此svg的空间更小。这会影响左/右的填充。

这里是更新的小提琴 - https://jsfiddle.net/zeq3da7p/3/