Chartist.js是否删除标签？

Question

这样我就可以display:none标签了。下面使用css，但我的.ct-char.在图表的左侧和底部仍然有一些东西。如下图所示。

.ct-labels, .ct-grids {
  display: none;
}

理想情况下，蓝色图表位于白色模块的左侧，底部向下，因此它与div匹配，它的位置是绝对的，并且图表响应性处于打开状态。我假设空白是从仍然存在于DOM中的标签创建的？

​

​

我想让图表在左边和底部显示没有空白。我的.ct-chart css如下所示。

.ct-chart {
position: absolute;
width: 100%;
left: 0;
top: 0;
height: 100%;
padding: 0;
z-index: -1;
}

Answer 1

如果你根本不想要标签，没有网格线，并删除所有的偏移和填充，你可以这样做，但它需要相当多的配置：

var chart = new Chartist.Line('.ct-chart', {
  labels: [1, 2, 3, 4],
  series: [
    [1, 4, 2, 5],
    [2, 3, 1, 4]
  ]
}, {
  showPoint: false,
  showLine: false,
  showArea: true,
  fullWidth: true,
  showLabel: false,
  axisX: {
    showGrid: false,
    showLabel: false,
    offset: 0
  },
  axisY: {
    showGrid: false,
    showLabel: false,
    offset: 0
  },
  chartPadding: 0,
  low: 0
});

http://jsbin.com/patela/1/edit?html,css,js,output

Answer 2

是的，这些是具有x和y值偏移量的svg元素。请看这里的示例，”>中的元素都定义了x和y偏移量，使它们远离父元素。在图表加载之后，用d3覆盖这些值非常简单。

Answer 3

当我加载图表时，我喜欢检查图表的宽度和标签的数量，如果需要，我可以显示标签，只显示其他标签，或者根据标签是否合适而隐藏所有标签。这段代码隐藏了标签：

setTimeout(function() {
    $('.ct-chart').find('.ct-labels .ct-horizontal').remove();
}, 100);