从chartist.js图表中删除填充

Question

我希望我的查特海图在我的网站上没有填补从左或右。我正在使用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/