如何调整chartist.js中网格线的间距?

时间:2016-05-25 09:26:19

标签: javascript charts linechart chartist.js

我遇到chartist.js时遇到问题。 我想通过y-axis调整40px网格线之间的间距。(现在36px) 我试图找到一些例子,但我不能。

.ct-grids line {
  stroke: #fff;
  opacity: .05;
  stroke-dasharray: none;
}

这是我目前的网格样式。

var data = {
  labels: ['JAN 1', 'JAN 18', 'FEB 14', 'MAR 9', 'APR 22', 'May 2'],
  series: [
  [40.8, 46.5, 48.8, 56.9, 68.7, 72.7],
  [12.8, 13.7, 13.9, 14.8, 15.3, 15.6],
  [5.2, 3.8, 4.2, 5, 3.9, 4.3],
  [1.2, 1.8, 1.7, 2.1, 1.8, 1.9]
  ]
};

var options = {
   showPoint: false,
   lineSmooth: false,
   axisX: {
        showGrid: false,
        showLabel: false
    },
    axisY: {
        offset: 0,
        showGrid: true,
        showLabel: false
    }
};

var chart = new Chartist.Line('.ct-chart', data, options);

如果您知道,请告诉我。 感谢。

2 个答案:

答案 0 :(得分:4)

请更改axisY这样的选项。

options = {
    axisY: {
        offset: 0,
        scaleMinSpace: 40
        showGrid: true,
        showLabel: false
    }
}

有关详细信息,请https://gionkunz.github.io/chartist-js/api-documentation.html

答案 1 :(得分:1)

使用scaleMinSpace选项上的axisY为我工作

options = {
    axisY: {
         scaleMinSpace: 40
    }
}