Chartist.js 标签样式 - 主要是填充/边距答案

【问题标题】：Chartist.js label styling - primarily padding/marginChartist.js 标签样式 - 主要是填充/边距
【发布时间】：2018-09-14 20:49:41
【问题描述】：

我需要能够为 x 轴标签添加一些额外的样式 - 主要是为了让它们与图表区域有更多的垂直分离。 CSS 似乎不适用于这个特定的用例。

有人知道如何实现吗？

这是当前问题的截图：https://puu.sh/BuMUE/91183fcbdf.png

【问题讨论】：

标签： chartist.js

【解决方案1】：

是的，您当然可以通过 JavaScript 或 CSS 为这些 x 轴添加一些空间，我假设您的意思是将它们与虚线分开，对吧？在这种情况下，您可以在创建图表的新实例时在选项中使用 offset 属性：

var data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],  
  series: [
    [5, 2, 4, 2, 0]
  ]
};

var options = {
    classNames: {
        chart: 'ct-chart',
        series: 'ct-series',
        label: 'ct-label'
    },    
    axisX: {
        offset: 70 //Insert here your axisX offset and play with the values
    },
    axisY: {
        offset: 55 //Insert here your axisY offset and play with the values
    }
};

var barChart = new Chartist.Bar('#someBarGraphID', data, options);

<link rel="stylesheet" href="bower_components/chartist/dist/chartist.min.css">
<div id="someBarGraphID"></div>
<script src="bower_components/chartist/dist/chartist.min.js">

如果你想要一个 CSS 解决方案，你总是可以通过在创建图表时选择图表的类来解决这个问题，只需尝试以下操作：

#someBarGraphID .ct-label .ct-horizontal {
    //Apply CSS to xAxis
}

#someBarGraphID .ct-label .ct-vertical{
    //Apply CSS to yAxis
}

【讨论】：

配置中的偏移量有效。在这种情况下，CSS 不会，因为我试图在标签底部添加边距。他们根本不动。此外，虽然偏移是一个可以接受的解决方案，但它不会增加整个图表空间的高度，因此在大约 20px 之后，它们开始推出可见 svg 区域的顶部。